如何在 Flutter 中为容器添加底部高度？答案

【问题标题】：How to add bottom elevation to a container in Flutter?如何在 Flutter 中为容器添加底部高度？
【发布时间】：2020-05-02 20:11:47
【问题描述】：

我已经看过 this 和 this 和 this 但他们没有回答我的问题。我需要提升我的Container 就在它下面，而不是它周围。

这是我目前所拥有的：

最后我的目标是消除一周中顶部的阴影。

我使用来自this 答案的代码在我的Container 上实现阴影效果，但我不希望它一直在周围，只是在底部有圆角而不是在顶部。任何帮助将不胜感激。

【问题讨论】：

标签： flutter shadow

【解决方案1】：

return PhysicalModel(
         elevation: 20,
         child: Container(),
       );

在 Flutter 文档中了解更多关于 PhysicalModel 的信息。

【讨论】：

【解决方案2】：

使用`Card`

Card(
  elevation: 8,
  shadowColor: Colors.blue,
  child: Container(width: 100, height: 100, color: Colors.white),
)

使用`DecoratedBox`

DecoratedBox(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.blue,
        blurRadius: 8,
        spreadRadius: 4,
        offset: Offset(0, 10),
      ),
    ],
  ),
  child: Container(width: 100, height: 100, color: Colors.white),
)

使用`PhysicalModel`

PhysicalModel(
  color: Colors.white,
  elevation: 8,
  shadowColor: Colors.blue,
  borderRadius: BorderRadius.circular(20),
  child: Container(width: 100, height: 100),
)

【讨论】：

【解决方案3】：

不幸的是，Container 没有 elevation 属性，您需要使用其他 Widget，例如 Card，但如果您确实想给 Container 一个 elevation 属性，您可以使用看看division 并观看tutorial 关于使用该软件包的信息。

Division：简单易用但功能强大的样式小部件，其语法受 CSS 启发。 ##

【讨论】：

您可以使用带有 BoxDecoration 的容器来制作高程阴影

【解决方案4】：

使用 Card 作为您的小部件的父级并使用 Card 的海拔属性。

【讨论】：

【解决方案5】：

child: Container(
                  height: Get.height/4,
                  width: Get.width/1.1,
                  decoration: BoxDecoration(
                    color: UIDataColors.white,
                    borderRadius: BorderRadius.circular(10.0),
                    border: Border.all(color: UIDataColors.white),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 2.0,
                        spreadRadius: 0.0,
                        offset: Offset(2.0, 2.0), // shadow direction: bottom right
                      )
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                ],
              ),


              //color: UIDataColors.white,

            )

【讨论】：

【解决方案6】：

使用Material 并且必须使用borderRadius: 相同的Container() 和Material()

Material(
                elevation: 5,
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
                child: Container(
                  height: 100,
                  width: _width / 1.1,
                  decoration: BoxDecoration(
                      color: Colors.amber,
                      borderRadius:
                          BorderRadius.only(topLeft: Radius.circular(50))),
                ),
              ),

结果

【讨论】：

【解决方案7】：

在我的选择中，最好的方法是在您当前使用的小部件上添加 Material()。

return Material(
       elevation: 20,
       child Container(),
       );

【讨论】：

这正是我想要的。
这很好，但如果您还想更改 Container 形状，它将无法正常工作。如果是这样，请使用已接受答案中的解决方案。
您也可以将相同的自定义形状添加到材质中
如果在 Carousel 中实现，这将不起作用。
这实际上不是一个正确的解决方案，它不是只在容器底部添加阴影，而是向所有侧面添加阴影。

【解决方案8】：

使用ClipRRect 去除阴影效果，并在Container 中添加底部margin 以克服底部的ClipRRect 仅显示阴影效果。

示例：

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(bottom: 6.0), //Same as `blurRadius` i guess
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.0),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 6.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

结果：

【讨论】：

【解决方案9】：

如果你只想添加阴影，那么 BoxDecoration 结合 BoxShadow 就可以了

...
...
body: Container(
    margin: EdgeInsets.all(8),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(2.0, 2.0), // shadow direction: bottom right
            )
        ],
    ),
    child: Container(width: 100, height: 50) // child widget, replace with your own
),
...
...

【讨论】：

使用Card

使用DecoratedBox

使用PhysicalModel

使用`Card`

使用`DecoratedBox`

使用`PhysicalModel`