Flutter 中 Container 封装的 Card 内 ListView 首个条目多余空白如何移除？

问题原因 #

Flutter 中 ListView 系列组件默认会自动添加适配系统安全区的内边距，当 ListView 嵌套在 Card、Container 等不需要适配安全区的内部容器中时，默认的顶部内边距就会表现为列表首个条目上方的多余空白。

问题示意图 #

修复方法 #

只需要给 ListView.builder 显式设置 padding 属性为 EdgeInsets.zero，覆盖默认的内边距配置即可：

Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(15.0),
        height: 300,
        child: Column(children: [
          Row(children: [
            Expanded(
                child: Text("Lowest Fuel Price",
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        color: Theme.orange3,
                        fontSize: 16.0)))
          ]),
          Container(
            height: 250,
            child: Card(
                elevation: 3,
                child: ListView.builder(
                    padding: EdgeInsets.zero, // 新增该行，移除ListView默认内边距
                    itemCount: cheapest.length,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      final item = cheapest[index];
                      return Column(
                        children: <Widget>[
                          Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: <Widget>[
                                Text(
                                  item.petrolType,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 18),
                                ),
                                Text(
                                  "\$" + item.petrolPrice,
                                  style: TextStyle(
                                      color: Theme.gray1, fontSize: 25),
                                ),
                                Image(
                                    fit: BoxFit.fill,
                                    image: new AssetImage(
                                        'assets/images/fuel_station/' +
                                            item.petrolStation.toLowerCase() +
                                            '.png')),
                              ]),
                          index != cheapest.length - 1
                              ? Divider(
                                  color: Colors.grey,
                                )
                              : Divider(color: Colors.white)
                        ],
                      );
                    })),
          )
        ]));
  }

补充说明 #

如果修改后仍存在微小空白，可检查Card组件是否有自定义全局主题配置的默认内边距，对应调整Card的padding属性即可。

内容的提问来源于stack exchange，提问作者Gene