Flutter中extendBody为true时ListView底部多余padding问题解决

问题根源 #

当Scaffold设置extendBody: true且带有BottomNavigationBar时，Flutter的ListView（包括ListView.builder）会自动检测底部导航栏高度并添加对应padding，原本是为了避免内容被遮挡，但开启extendBody: true后我们希望内容延伸到导航栏下方，这个自动padding就变成了多余空白。

具体解决方法 #

1. 直接给ListView设置padding为零

最简单直接的方式，取消ListView的自动padding，如需避免悬浮按钮遮挡内容，再按需手动添加底部间距：

ListView.builder(
  padding: EdgeInsets.zero, // 关键：禁用自动添加的底部padding
  itemCount: 20,
  itemBuilder: (context, index) {
    return ListTile(title: Text('垂直列表项 $index'));
  },
)

如果担心最后一项被悬浮按钮挡住，可以手动加适配的padding：

padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight * 0.6),

2. 用MediaQuery.removePadding精准移除底部padding

如果ListView嵌套在其他组件中自动padding仍存在，用MediaQuery.removePadding包裹，只移除底部的自动补偿padding：

MediaQuery.removePadding(
  context: context,
  removeBottom: true, // 仅移除底部自动生成的padding
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) {
      return ListTile(title: Text('垂直列表项 $index'));
    },
  ),
)

3. 针对CustomScrollView中的Sliver组件

如果是用SliverToBoxAdapter包裹ListView，或者直接用SliverList，结合MediaQuery.removePadding处理，同时注意禁用内部ListView的滚动（避免和外层CustomScrollView冲突）：

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: MediaQuery.removePadding(
        context: context,
        removeBottom: true,
        child: ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(), // 禁用内部滚动，交给外层CustomScrollView处理
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(title: Text('垂直列表项 $index'));
          },
        ),
      ),
    ),
    // 其他sliver组件...
  ],
)

注意事项 #

• 若ListView设置了shrinkWrap: true，自动padding问题可能依然存在，结合上述方法使用即可。
• 手动添加底部padding时，建议用kBottomNavigationBarHeight常量适配不同设备导航栏高度，不要硬编码数值。

内容的提问来源于stack exchange，提问作者Maka