Flutter技术问询：用Navigator叠加页面时保留后台可交互地图

针对你的需求，这里有几个实用的方案，既能利用Navigator的路由管理能力，又能让后台地图保持可交互：

方案1：自定义非全屏、非不透明Route #

默认的MaterialPageRoute是全屏且不透明的，会将后台页面从Widget树中移除。通过自定义PageRouteBuilder并设置opaque: false，可以保留后台页面，再配合触摸透传处理实现地图交互。

示例代码：

Navigator.push(
  context,
  PageRouteBuilder(
    opaque: false, // 核心：不隐藏后台地图页面
    barrierDismissible: true, // 点击空白区域可关闭（可选）
    pageBuilder: (context, animation, secondaryAnimation) {
      return Stack(
        children: [
          // 透明区域：将触摸事件透传给后台地图
          Positioned.fill(
            child: GestureDetector(
              onTap: () => Navigator.pop(context),
              behavior: HitTestBehavior.translucent,
            ),
          ),
          // 你的新页面内容（示例为底部弹窗）
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 320,
            child: Container(
              color: Colors.white,
              child: YourNewPageContent(),
            ),
          ),
        ],
      );
    },
    // 可选：添加过渡动画（底部滑入）
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(0, 1),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  ),
);

方案2：使用OverlayEntry #

Flutter的Overlay是Navigator的底层实现，直接插入OverlayEntry可以在所有页面之上显示内容，同时完全保留后台地图的交互能力，适合临时浮层类的页面。

示例代码：

void showMapOverlay(BuildContext context) {
  final overlay = Overlay.of(context);
  final overlayEntry = OverlayEntry(
    builder: (context) => Stack(
      children: [
        // 透明区域：点击关闭并透传触摸
        Positioned.fill(
          child: GestureDetector(
            onTap: () => overlayEntry.remove(),
            behavior: HitTestBehavior.translucent,
          ),
        ),
        // 新页面内容（示例为侧边面板）
        Positioned(
          left: 0,
          top: 0,
          bottom: 0,
          width: 280,
          child: Container(
            color: Colors.white,
            child: YourNewPageContent(
              onClose: () => overlayEntry.remove(),
            ),
          ),
        ),
      ],
    ),
  );
  overlay.insert(overlayEntry);
}

方案3：嵌套Navigator+Stack #

如果需要在地图上方管理多个页面的路由栈，可以在地图页面的Stack中嵌套一个独立的Navigator，地图始终作为底层组件存在。

示例代码：

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final _nestedNavKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 底层地图组件，始终可交互
        YourMapWidget(),
        // 嵌套Navigator管理上层页面
        Navigator(
          key: _nestedNavKey,
          initialRoute: '/',
          onGenerateRoute: (settings) {
            if (settings.name == '/') {
              // 初始路由为空页面，让地图完全可见可交互
              return MaterialPageRoute(
                builder: (_) => SizedBox.shrink(),
                settings: settings,
              );
            }
            // 匹配新页面路由
            if (settings.name == '/detail') {
              return MaterialPageRoute(
                builder: (_) => YourDetailPage(
                  onBack: () => _nestedNavKey.currentState?.pop(),
                ),
                settings: settings,
                fullscreenDialog: false,
              );
            }
            return null;
          },
        ),
      ],
    );
  }

  // 调用此方法打开上层页面
  void openDetailPage() {
    _nestedNavKey.currentState?.pushNamed('/detail');
  }
}

关键注意点 #

• 所有方案都需要确保新页面的透明区域不拦截触摸事件，通过GestureDetector(behavior: HitTestBehavior.translucent)或IgnorePointer实现触摸透传。
• 自定义Route时必须设置opaque: false，否则后台页面会被隐藏。
• 使用OverlayEntry时，务必在页面关闭时调用remove()避免内存泄漏。

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