时间戳

首页 > 解决方案 > ListView 和 Card Flutter 中的额外“空间”

flutter - ListView 和 Card Flutter 中的额外“空间”

问题描述

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

在此处输入图像描述

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

标签： flutterlistview

解决方案

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

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

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

推荐阅读