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

Posted 2023-02-23

【中文标题】Flutter - 容器 BoxShadow 在 ListView 中滚动时消失

【英文标题】：Flutter - Container BoxShadow disappears on scroll in a ListView

【发布时间】：2017-10-04 20:52:30

【问题描述】：

这是我的容器的样子：

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，阴影就会消失。加载视图时，它显示正确。

对这个问题有什么想法吗？

谢谢

【参考方案1】：

我试图重现该问题，但我注意到您没有在容器上设置任何边距。 ListView 中的其他项目很可能会覆盖您手动绘制的阴影，因为它是在您的 Container 范围之外绘制的。

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

Card 的角略微圆润。如果您不想要圆角，那么您将偏离 Material Design 的规范，但您可以尝试将 Material 与 MaterialType.canvas 的 type 括在 Container 内。

【讨论】：

是的，边距是问题！非常感谢您解释问题... :)

【参考方案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: ...
),

【参考方案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(),
           ),
      ],
    ),
  ),
),

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