仅将底部阴影颤动到容器

Question

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

我申请了这个答案，但没有得到正确的回复。容器顶部仍有阴影。我怎样才能实现它？

而且我还尝试用 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,
      ],
    ),
  ),
),

这将在 Container 周围创建 shadow 个 15 units。现在，可以使用 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.

包装它

Offset 是阴影相对于盒子的位移。它需要 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,
          ),
        ),

我的提示：要确保阴影不会出现在容器的顶部，请确保模糊半径不更大 比你的 Offset 的 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() 构造函数，你将它设置为正值来控制阴影底部。

仅将底部阴影颤动到容器

flutter only bottom shadow to container

shadow

flutter

flutter-container