flutter - 仅将底部阴影颤动到容器

Question

我尝试了很多解决方案，但我无法得到我想要的。

https://stackoverflow.com/a/56744034/4862911我申请了这个答案，但无法得到正确的回复。容器顶部仍有阴影。我怎样才能实现它？

而且我还尝试用Material. 但仍然无法解决问题。

 Material(
        elevation: 5,
        child: Container(
          height: 50,
          child: _buildEloAndLevel(),

        ),
      ),

Answer 1

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
      ],
    ),
  ),
),

这将创建一个shadowof15 units周围的Container. 现在，可以使用offset属性移动阴影。由于我们不希望顶部有阴影，我们可以将其向下移动15 units.

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
        offset: Offset(0, 15), // horizontally move 0, vertically move 15,
      ],
    ),
  ),
),

Answer 2

您需要做的就是玩弄偏移量的值。而且我认为你不需要用Material.

偏移量是阴影从盒子中的位移。它需要 2 个双重类型的值，Offset(x, y);

例子：

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(15.0, 20.0),
                  blurRadius: 20.0,
                )
              ],
            color: Colors.red,
          ),
        ),

来自我的提示：为确保阴影不会出现在容器顶部，请确保模糊半径不大于偏移的 y 值。

Answer 3

我不知道其他示例是否真的只为底部设置阴影，但这是一个已知的解决方案：

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  blurRadius: 20.0,
                  spreadRadius: -20.0,
                  offset: Offset(0.0, 25.0),
                )
              ],
            color: Colors.red,
          ),
        ),

设置阴影的模糊，blurRadius然后设置spreadRadius为负，blurRadius然后使用构造函数的dy属性，Offset()将其设置为正值来控制阴影底部。