Flutter:ListView顶部出现意外空格

5fjcxozz  于 2023-03-24  发布在  Flutter
关注(0)|答案(5)|浏览(149)

我有以下源代码:

@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要这样做。我怎么删除空格?

wbgh16ku

wbgh16ku1#

要避免listview的这种行为,zero**[padding]覆盖**padding属性

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

bgibtngc2#

看一下你的屏幕截图,ListView滚动到屏幕顶部附近,默认情况下,ListView添加了一个填充,以避免阻碍系统UI。所以零填充将删除多余的空间。
默认情况下,ListView将自动填充列表的可滚动端点,以避免MediaQuery的填充所指示的部分障碍。若要避免此行为,请使用零填充属性进行重写。
来源:ListView

dvtswwa3

dvtswwa33#

我通过在列表视图中添加一个padding来解决这个问题,如下所示:

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

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

lskq00tm

lskq00tm4#

您可以使用MediaQuery.removePadding Package 您的列表视图

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

w8f9ii695#

MediaQuery.removePadding(
              context: context,
              removeTop: true,
              child: Padding(
                padding: EdgeInsets.zero,
                child: ListView.builder(
this will remove any excess padding issue that is hard to solve in the listview.builder

相关问题