flutter - flutter :ListView上的裁剪阴影

Question

我只想在Flutter中创建带有一些BoxShadows的水平ListView，以重新创建“新同构”效果。

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

奇怪的是:无法加载作为图像 Assets 的卡会使Shadow非常完美。

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:

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

Answer 1

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