Flutter - 容器BoxShadow在ListView中滚动时消失

Question

这就是我的Container的样子:

new Container(
        width: 500.0,
        height: 250.0,
        padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
        decoration: new BoxDecoration(
          color: const Color(0xFF66BB6A),
          boxShadow: [new BoxShadow(
            color: Colors.black,
            blurRadius: 20.0,
          ),]
        ),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Container(
              padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0),
              child: new Text("Testtext", style: new TextStyle(fontSize: 30.0, fontFamily: "Barrio", color: new Color.fromARGB(255, 230, 230, 230))),
            ),
          ]
        ),
      ),

它位于带有其他容器的ListView中.一旦我开始滚动ListView,阴影就会消失.加载视图时,它显示正确.

有关这个问题的任何想法？

谢谢

Answer 1

我试图重现该问题，但我注意到您没有在Container上留任何余地。您的其他项目很可能ListView掩盖了您手动绘制的阴影，因为它是在的边界之外绘制的Container。

我建议您使用Card而不是容器。您可以使用elevation构造函数参数获得看起来自然的材质阴影。卡具有一些内置的边距，Container如果需要，您可以将其括起来以添加更多的边距。这将为您提供足够的空间以使阴影可见。您可以Card使用color构造函数参数控制的颜色。

a的角Card略圆。如果你不想圆角，你会从材料的设计是想不合规格的，但你可以尝试包围Material了type的MaterialType.canvas里面Container。

Answer 2

This other answer is for those who need to continue with Container:

Container(
          decoration: BoxDecoration(
          shape: BoxShape.circle, // BoxShape.circle or BoxShape.retangle
          //color: const Color(0xFF66BB6A),
          boxShadow: [BoxShadow(
            color: Colors.grey,
            blurRadius: 5.0,
          ),]
        ),
          child: ...
),