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,
      ],
    ),
  ),
),

这将在shadow附近创建15 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包装它。

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,
          ),
        ),

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

仅将底部阴影扑向容器

2 个答案: