Flutter如何让showModalBottomSheet显示在BottomNavigationBar上方不遮挡

问题核心原因 #

系统自带的showModalBottomSheet默认占满当前Scaffold的全屏空间，所以会直接覆盖bottomNavigationBar区域；调用ScaffoldState.showBottomSheet时存在手势拦截逻辑，会导致底部导航栏无法响应点击事件。

推荐方案1：自定义可展开容器（无冲突，最稳定） #

直接将需要弹出的菜单作为页面布局的一部分，和原有页面内容纵向排列，点击导航栏时切换显示状态，完全不会影响底部导航栏的交互。

实现代码： #

// 页面内定义状态变量，控制菜单显隐
bool _showExtraMenu = false;

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context);
  return WillPopScope(
    onWillPop: () => _willPopCallback(context),
    child: Scaffold(
      // 改造body为纵向布局
      body: Column(
        children: [
          // 原有页面内容用Expanded包裹，占满除菜单外的剩余空间
          Expanded(
            child: PageView(
              controller: _controller,
              physics:const NeverScrollableScrollPhysics(),
              onPageChanged: (v) => setState(() => _selectedIndex = v),
              children: BottomNavigationList.pageList(context),
            ),
          ),
          // 可展开的菜单区域，加动画实现和弹窗一致的滑入滑出效果
          AnimatedSize(
            duration: const Duration(milliseconds: 200),
            alignment: Alignment.topCenter,
            child: _showExtraMenu ? SizedBox(
              height: 200, // 按需调整菜单高度
              child: GridView.count(
                // 你原有GridView的配置逻辑
                crossAxisCount: 4,
                children: [],
              ),
            ) : const SizedBox.shrink(),
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (v) {
          setState(() {
            if (v == 3) {
              // 点击菜单按钮切换显隐状态
              _showExtraMenu = !_showExtraMenu;
              return;
            }
            // 点击其他导航项时自动关闭菜单，同时切换页面
            _showExtraMenu = false;
            _selectedIndex = v;
            _controller.jumpToPage(v);
          });
        },
        // 你原有BottomNavigationBar的其他配置
        currentIndex: _selectedIndex,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(icon: Icon(Icons.menu), label: "更多"),
        ],
      ),
    ),
  );
}

方案2：适配系统弹窗（需要保留弹窗特性时使用） #

如果需要保留弹窗点击外部关闭、遮罩层等特性，可以通过设置弹窗底部边距避开导航栏区域。

实现代码： #

showModalBottomSheet(
  context: context,
  useRootNavigator: false,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Container(
      // 底部边距设置为导航栏高度，刚好避开导航栏
      margin: EdgeInsets.only(bottom: kBottomNavigationBarHeight),
      child: Container(
        color: Colors.white,
        height: 200,
        child: GridView.count(
          // 你原有GridView的配置逻辑
        ),
      ),
    );
  },
);

内容的提问来源于stack exchange，提问作者Vincent H Guyo