Flutter：ListView顶部出现意外空间答案

【问题标题】：Flutter: unexpected space at the top of ListViewFlutter：ListView顶部出现意外空间
【发布时间】：2020-12-17 17:21:55
【问题描述】：

我有以下源代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      controller: scrollController,
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, cardIndex) {
              return Container(
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Main Course',
                      style: kRestaurantMenuTypeStyle,
                    ),
                    ListView.builder(
                      itemCount: menuCards[cardIndex].menuItems.length,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      itemBuilder: (context, itemIndex) {
                        return RestaurantMenuItem(
                          menuItem: menuCards[cardIndex].menuItems[itemIndex],
                        );
                      },
                    ),
                  ],
                ),
              );
            },
            childCount: menuCards.length,
          ),
        ),
      ],
    ),
  );
}

不幸的是，ListView.builder() 会自动在顶部创建这个额外的空间。如下图所示。那是“主菜”和“Pancit Malabon”文本之间的大空白。

我不明白为什么ListView 会这样做。如何删除空格？

【问题讨论】：

标签： flutter listview

【解决方案1】：

在 ListView.builder 中添加 padding: EdgeInsets.zero, 以删除多余的间距。 ListView 添加了额外的填充，以免破坏 UI。

例子：

ListView.builder(
  padding: EdgeInsets.zero,
  // other parameters
),

【讨论】：

【解决方案2】：

为避免列表视图的这种行为，override padding property with a zero [padding]

return ListView.builder(
      padding: EdgeInsets.zero,
      itemCount: data.items.length,
      itemBuilder: (context, index) {}
);

【讨论】：

【解决方案3】：

查看您的屏幕截图，ListView 滚动到靠近屏幕顶部，默认情况下，ListView 添加了一个填充以避免阻碍系统 UI。所以零填充会删除额外的空间。

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

来源：ListView

【讨论】：

【解决方案4】：

我通过在列表视图中添加padding 解决了这个问题，如下所示：

ListView.builder(
  padding: EdgeInsets.only(top: 0.0),
  ...
),

我不明白为什么该解决方案有效。如果有人能解释这个错误，我可以接受他们的正确答案。

【讨论】：