Flutter如何实现内容绘制在导航栏/手势栏下方的效果？

核心逻辑 #

要让内容能在底部手势栏后方滚动，本质是让滚动布局的绘制区域延伸到底部栏下方，同时底部栏悬浮在最上层，不会挤压滚动布局的空间。

方案1：Scaffold原生实现（最简单） #

利用Scaffold自带的extendBody属性即可快速实现：

Scaffold(
  // 核心属性：开启后body会延伸到底部导航栏的后方
  extendBody: true,
  body: ListView.builder(
    // 底部预留出手势栏高度+系统安全区高度，避免底部内容被遮挡
    padding: EdgeInsets.only(bottom: 60 + MediaQuery.of(context).padding.bottom),
    itemCount: 50,
    itemBuilder: (context, index) => ListTile(title: Text("消息条目 $index")),
  ),
  // 底部自定义手势栏
  bottomNavigationBar: Container(
    height: 60,
    color: Colors.white.withOpacity(0.9),
    child: const Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Icon(Icons.message),
        Icon(Icons.search),
        Icon(Icons.settings),
      ],
    ),
  ),
)

方案2：Stack自定义布局（灵活度更高） #

如果需要更自由的布局控制，直接用Stack嵌套滚动层和悬浮栏层即可：

Stack(
  fit: StackFit.expand,
  children: [
    // 滚动内容层
    ListView.builder(
      padding: EdgeInsets.only(bottom: 60 + MediaQuery.of(context).padding.bottom),
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text("消息条目 $index")),
    ),
    // 悬浮手势栏层
    Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: SafeArea(
        child: Container(
          height: 60,
          color: Colors.white.withOpacity(0.9),
          child: const Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(Icons.message),
              Icon(Icons.search),
              Icon(Icons.settings),
            ],
          ),
        ),
      ),
    ),
  ],
)

两种方案都需要给滚动组件添加底部padding，避免滚动到底部时内容被手势栏遮挡
实现效果参考：

内容的提问来源于stack exchange，提问作者mosh.jinton