Flutter列表被底部导航栏遮挡，如何调整滚动使其完全显示？

方案1：使用Scaffold原生布局（推荐新手） #

如果你的底部导航栏是页面固定组件，直接用Scaffold的bottomNavigationBar属性，Flutter会自动调整body区域的高度，确保列表内容不会被导航栏遮挡，这是最符合Flutter布局规范的做法。

Scaffold(
  appBar: AppBar(title: const Text('卡片列表')),
  // 列表直接放在body里，会自动避开底部导航栏
  body: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) {
      return Card(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Text('卡片 ${index + 1}'),
        ),
      );
    },
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
    ],
  ),
)

方案2：给列表添加底部内边距 #

如果因为布局需求无法使用Scaffold的bottomNavigationBar（比如导航栏是悬浮样式），可以给列表添加底部内边距，确保最后一行滚动后能完全显示。推荐用Flutter内置的kBottomNavigationBarHeight常量获取标准导航栏高度，再加上一点额外间距提升体验。

// 方式1：给ListView设置padding属性
ListView.builder(
  padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight + 16), // 16是额外留白
  itemCount: 20,
  itemBuilder: (context, index) {
    return YourCardWidget();
  },
)

// 方式2：用Padding包裹ListView
Padding(
  padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight + 16),
  child: ListView.builder(...),
)

方案3：结合安全区域适配 #

如果你的应用需要适配刘海屏、全面屏等特殊机型，可搭配SafeArea使用，它会自动识别设备的底部安全区域，避免内容被系统状态栏或导航栏遮挡：

SafeArea(
  child: Padding(
    padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight + 8),
    child: ListView.builder(...),
  ),
)

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