如何让BottomSheet弹窗不遮挡底部导航栏？

核心问题在于showModalBottomSheet会默认生成全屏遮罩——无论是否设置useRootNavigator: true，遮罩都会覆盖底部导航栏所在的层级，导致无法交互。直接放弃用showModalBottomSheet，改为将弹窗作为页面布局的一部分渲染，就能绕过这个限制。

具体修改步骤： #

1. 在页面State中添加弹窗显示状态变量：

bool _showBottomSheet = false;

2. 修改_onItemTapped方法，去掉showModalBottomSheet，直接通过状态变量控制弹窗显示：

void _onItemTapped(int index) async {
  setState(() {
    _selectedIndex = index;
  });

  if (index == 4) {
    if (_showBottomSheet) {
      // 关闭弹窗
      await _controller.reverse();
      setState(() => _showBottomSheet = false);
    } else {
      // 打开弹窗
      setState(() => _showBottomSheet = true);
      await _controller.forward();
    }
  } else {
    // 切换其他导航项时关闭弹窗
    if (_showBottomSheet) {
      await _controller.reverse();
      setState(() => _showBottomSheet = false);
    }
  }
}

3. 重构页面布局，将body改为Stack，把弹窗作为子元素嵌入，同时留出底部导航栏的高度避免遮挡：

body: SafeArea(
  child: Stack(
    children: [
      // 原来的页面内容
      _screens.elementAt(_selectedIndex).body!,
      // 弹窗内容
      if (_showBottomSheet)
        Positioned(
          left: 0,
          right: 0,
          bottom: kBottomNavigationBarHeight, // 留出底部导航栏高度
          child: DraggableScrollableSheet(
            initialChildSize: 0.9,
            maxChildSize: 0.9,
            minChildSize: 0.3,
            builder: (_, controller) => ListView(
              controller: controller,
              children: const [
                MoreOptionsModal(),
              ],
            ),
          ),
        ),
    ],
  ),
),
bottomNavigationBar: BottomNavigationBar(
  items: _buildBottomNavItems(),
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),

补充说明： #

• 这种方式下，弹窗属于页面布局的一部分，不在模态遮罩层里，底部导航栏完全处于可交互状态。
• 如果需要弹窗的半透明背景，可以在Stack里添加一个半透明的Container作为遮罩层，放在弹窗下面，同时给遮罩层添加点击关闭弹窗的逻辑。

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