颤振：ListView顶部的意外空间

Question

我有以下源代码：

@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()自动在顶部创建了这个额外的空间。如下图所示。那是“主要课程”和“ Bicol Express”文本之间的空白。

我不明白为什么ListView那样做。如何删除空间？

Answer 1

我通过在列表视图中添加一个padding来解决了这个问题，

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

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

Answer 2

查看您的屏幕快照，ListView滚动到屏幕顶部附近，默认情况下，ListView添加填充以免妨碍系统UI。因此，零填充将删除多余的空间。

默认情况下，ListView将自动填充列表的可滚动内容 避免MediaQuery指示的局部阻塞 填充。若要避免此行为，请使用零填充进行覆盖 属性。

来源：ListView

Answer 3

要避免列表视图的这种行为，请使用零 [padding]

覆盖填充属性

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