Flutter技术问询：如何让showBottomSheet覆盖bottomNavigationBar

开发者阿泽

2026-5-9

让showBottomSheet显示在BottomNavigationBar之上的解决方案

这个问题我开发时也踩过坑！默认情况下showBottomSheet会被BottomNavigationBar挡住，其实只要调整两个关键配置就能实现你要的效果，直接上干货：

核心原理

默认的showBottomSheet是依附在当前Scaffold的导航层级下，而BottomNavigationBar属于Scaffold的底部组件，层级更高，所以sheet会被挡住。我们需要让sheet脱离当前Scaffold的层级，同时让Scaffold的内容区域延伸到底部导航栏下方。

具体步骤

给Scaffold添加extendBody: true属性，让页面内容区域延伸到BottomNavigationBar的下方区域
调用showBottomSheet时，设置useRootNavigator: true，让sheet挂载到根导航器上，这样就能覆盖在所有页面组件之上

修改后的完整代码示例

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  // 关键属性1：让body延伸到底部导航栏下方
  extendBody: true,
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      showBottomSheet(
        context: context,
        // 关键属性2：使用根导航器挂载sheet
        useRootNavigator: true,
        builder: (c) => Container(
          height: 200,
          color: Colors.blue[100],
          child: const Center(child: Text("底部弹窗（在导航栏之上）")),
        ),
      );
    },
    child: const Icon(Icons.push_pin),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
    ],
  ),
);