ListView 和 Card Flutter 中的额外“空间”答案

【问题标题】：Extra "Space" In ListView and Card FlutterListView 和 Card Flutter 中的额外“空间”
【发布时间】：2021-11-23 06:37:11
【问题描述】：

我的第一个列表视图项目上有这个“额外空间”，这是一张封装在容器中的卡片。如何删除它？

 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(
                    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)
                        ],
                      );
                    })),
          )
        ]));
  }

【问题讨论】：

标签： flutter listview

【解决方案1】：

https://api.flutter.dev/flutter/widgets/ListView-class.html

默认情况下，ListView 将自动填充列表的可滚动末端，以避免 MediaQuery 填充指示的部分障碍。为避免这种行为，请使用零填充属性覆盖。

        Card(
          elevation: 3,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: ListView.builder(),
          ),
        ),

【讨论】：

删除顶部时看起来很奇怪。即使“removeBottom：true”，最后一项现在也有填充
尝试将容器的高度设置为动态。您有 2 个将高度设置为 300 和 250 的容器，我怀疑 300 是问题所在。尝试在 Container 约束字段中使用 BoxConstraints.tightForFinite()。
我必须在 removeTop = true 之后给它一些顶部填充以获得更统一的外观并添加tightForFinite 消除双高问题
没问题，如果这个答案解决了你的问题，请采纳。