Flutter：ListView 上的裁剪阴影答案

【问题标题】：Flutter: Cropped Shadows on ListViewFlutter：ListView 上的裁剪阴影
【发布时间】：2023-03-27 01:55:01
【问题描述】：

我只是想用一些 BoxShadows 在 Flutter 中创建一个水平 ListView 来重新创建“新同态”效果。

然后我意识到 ListView 项目上的阴影在边缘被裁剪。我已经尝试调整各种不同的填充和边距，但问题仍然存在。

奇怪的是：无法加载作为图像资源的卡片可以完美地渲染阴影。

class _DrinkListState extends State<DrinkList> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView.builder(
            padding: EdgeInsets.all(30),
            physics: AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount: this.widget.availableDrinks.length,
            itemBuilder: (BuildContext context, int index) => Container(
                  child: Center(
                      child: LimitedBox(
                    child: Column(
                      children: <Widget>[
                        Expanded(
                          flex: 4,
                          child: Container(
                            child: Center(
                              child: Container(
                                child: Image.asset("assets/" +
                                    this
                                        .widget
                                        .availableDrinks[index]
                                        .imageName),
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                            flex: 1,
                            child:
                                Text(this.widget.availableDrinks[index].label))
                      ],
                    ),
                  )),
                  margin: EdgeInsets.symmetric(horizontal: 20),
                  decoration: neodec,
                  padding: EdgeInsets.all(20),
                  width: 200,
                )),
        height: 300);
  }
}

我的盒子装饰：

BoxDecoration neodec = BoxDecoration(
    color: Color.fromRGBO(246, 246, 246, 1),
    boxShadow: [
      BoxShadow(color: Colors.black12, offset: Offset(10, 10), blurRadius: 10),
      BoxShadow(color: Colors.white, offset: Offset(-10, -10), blurRadius: 10)
    ],
    borderRadius: BorderRadius.all(Radius.circular(20)));

【问题讨论】：

修复它的唯一方法是在元素之间添加更多填充......就是这样。
@MarianoZorrilla 感谢您的回答！所以你的意思是增加 ListViewBuilder 中的 padding 属性（目前设置为 30？）。我已经尝试过了，但没有帮助：/.
您需要增加 Container “卡片”形容器内的填充。我建议使用填充 EdgeInsets.symmetric 并仅增加宽度填充而不是高度填充。或者，如果您认为只有正确的填充是冲突的，请使用 EdgeInsets.only

标签： flutter dart

【解决方案1】：

我终于设法通过在我的 WidgetBuilder/Container 中使用 Card 而不是 Center 小部件来解决这个问题。

【讨论】：