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]覆盖填充属性

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

Answer 2

查看您的屏幕截图，

ListView

滚动到屏幕顶部附近，默认情况下，

ListView

添加填充以避免遮挡系统 UI。因此零填充会消除多余的空间。

默认情况下，ListView会自动填充列表的可滚动部分 四肢以避免 MediaQuery 指示的部分障碍 填充。为了避免这种行为，请使用零填充覆盖 财产。

来源：ListView

Answer 3

我通过在列表视图中添加

padding

解决了这个问题，如下所示：

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

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

Answer 4

您可以用

MediaQuery.removePadding

包裹列表视图

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

Answer 5

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

注意：这将消除 ListView.builder 中难以解决的任何多余填充问题