如何让Flutter模态底部弹窗的遮罩区域支持交互？

默认的showModalBottomSheet会在弹窗上方添加半透明遮罩层，这个层会拦截所有底层视图的触摸事件，导致地图无法交互。要解决这个问题，你可以通过以下两种方式实现：

方案一：自定义底部弹窗（推荐） #

放弃使用系统默认的showModalBottomSheet，改用Stack + Positioned实现自定义底部面板，完全控制触摸事件的传递：

class MapWithBottomSheet extends StatefulWidget {
  @override
  _MapWithBottomSheetState createState() => _MapWithBottomSheetState();
}

class _MapWithBottomSheetState extends State<MapWithBottomSheet> {
  bool _showBottomSheet = false;
  final double _sheetHeight = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 底层地图组件（替换成你的实际地图Widget即可）
          GestureDetector(
            onTap: () => print('地图被点击'),
            child: Container(
              color: Colors.blue[100],
              alignment: Alignment.center,
              child: Text('可交互的地图'),
            ),
          ),
          // 自定义底部弹窗
          if (_showBottomSheet)
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: GestureDetector(
                // 确保弹窗自身触摸事件正常响应，不穿透
                behavior: HitTestBehavior.opaque,
                child: Container(
                  height: _sheetHeight,
                  color: Colors.white,
                  padding: EdgeInsets.all(16),
                  child: Column(
                    children: [
                      Text('自定义底部面板'),
                      ElevatedButton(
                        onPressed: () => setState(() => _showBottomSheet = false),
                        child: Text('关闭面板'),
                      )
                    ],
                  ),
                ),
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _showBottomSheet = true),
        child: Icon(Icons.add),
      ),
    );
  }
}

这种方式优势是完全可控，你可以自由调整弹窗的位置、样式，同时保证底层地图的触摸事件正常传递。

方案二：修改系统ModalBottomSheet的遮罩行为 #

如果坚持使用showModalBottomSheet的样式，可以通过自定义Route让遮罩层不拦截触摸事件：

Future<void> showInteractiveBottomSheet(BuildContext context) {
  return Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      barrierColor: Colors.transparent, // 隐藏默认遮罩
      pageBuilder: (context, animation, secondaryAnimation) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: Offset(0, 1),
            end: Offset(0, 0),
          ).animate(animation),
          child: Container(
            height: 200,
            color: Colors.white,
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Text('系统样式底部面板'),
                ElevatedButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('关闭面板'),
                )
              ],
            ),
          ),
        );
      },
    ),
  );
}

调用这个方法弹出的底部面板，底层地图可以正常响应触摸事件，同时面板自身的交互不受影响。

注意：如果需要保留半透明遮罩但仍允许触摸穿透，不能直接设置barrierColor为半透明（默认遮罩层会拦截触摸），这种情况下推荐用方案一，在自定义弹窗的上层添加半透明GestureDetector并设置behavior: HitTestBehavior.translucent，既能显示遮罩，又能让触摸事件穿透到底层。

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