Flutter

Question

这是我的容器的样子：

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 构造函数参数获得看起来自然的 material 阴影。卡片带有一些内置边距，如果需要，您可以通过将其括在 Container 中来添加更多边距。这将为您提供足够的 space 让阴影可见。您可以使用 color 构造函数参数控制 Card 的颜色。

Card 的边角略微圆润。如果你不想要圆角，你将偏离 Material 设计的规范，但你可以尝试将 Material with a type of MaterialType.canvas 包含在 Container.

中

Answer 2

这个答案是为那些需要继续 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: ...
),

Answer 3

经过多次尝试我解决了这个问题。

// if scroll view overflow on other widget then use ClipRRect With Expanded.

    ClipRRect(
    child: Expanded(
    child: ListView(
    clipBehavior: Clip.none, //add this line inside AnyScrollView or ListView
      children:[
         Container(
             decoration: BoxDecoration(boxShadow: [
                BoxShadow(
                      offset: Offset(2, 2),
                      blurRadius: 12,
                      color: Color.fromRGBO(0, 0, 0, 0.16),
                )
               ]),
             child: Widgets(),
           ),
      ],
    ),
  ),
),

我遇到了同样的问题，我用这个技巧解决了。

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

Flutter - Container BoxShadow disappears on scroll in a ListView

listview

dropshadow

dart