Flutter：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()会自动在顶部创建这个额外的空间。如下图所示。这是“主菜”和“Pancit Malabon”文本之间的大空白。

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

Answer 1

为了避免列表视图的这种行为，请使用零覆盖padding 属性[padding]

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

Answer 2

查看您的屏幕截图，ListView滚动条靠近屏幕顶部，并且默认情况下ListView会添加填充以避免遮挡系统 UI。因此零填充会删除多余的空间。

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

来源：列表视图

Answer 3

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

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

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