Flutter如何实现showModalBottomSheet位于AppBar下方且不可关闭

实现思路 #

核心逻辑是让模态底sheet的父容器限制为Scaffold的body区域，而非全局页面，这样遮罩自然只会覆盖AppBar下方的内容（含地图区域），同时保留模态属性禁止下方地图交互。

具体实现步骤 #

• 给Scaffold的body绑定单独的BuildContext，可直接用Builder组件包裹body获取body层级的上下文，确保调用showModalBottomSheet时传入的是body的上下文，而非页面根上下文。
• 配置showModalBottomSheet的关闭限制属性：
  • 设置isDismissible: false 禁止点击遮罩区域关闭底sheet
  • 设置enableDrag: false 禁止拖拽下滑关闭底sheet
  • 额外设置useRootNavigator: false 确保使用当前页面的导航栈，而非根导航，避免遮罩穿透到AppBar层级
• 可根据业务需求自定义barrierColor（遮罩颜色）、isScrollControlled（是否支持底sheet全屏展开）等参数。

核心代码示例 #

Scaffold(
  appBar: AppBar(title: const Text("谷歌地图页面")),
  body: Builder(
    // 通过Builder获取body层级的context
    builder: (bodyContext) {
      return GoogleMap(
        // 地图基础配置省略
        onTap: (position) {
          // 唤起模态底sheet
          showModalBottomSheet(
            context: bodyContext, // 核心：传入body的context，而非页面根context
            isDismissible: false,
            enableDrag: false,
            useRootNavigator: false,
            barrierColor: Colors.black54,
            builder: (sheetContext) {
              return Container(
                padding: const EdgeInsets.all(16),
                height: 300,
                // 底sheet内容区域省略
              );
            }
          );
        },
      );
    }
  )
)

效果说明 #

该实现完全匹配需求：

• 遮罩仅覆盖AppBar下方的页面区域，AppBar的返回按钮、自定义操作项均可正常点击
• 遮罩会拦截所有下方地图的交互事件，不会出现普通bottom sheet下地图可操作的问题
• 点击遮罩、拖拽底sheet均不会触发关闭，仅可通过底sheet内部的关闭按钮主动控制关闭逻辑

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