点击NavigationBar切换页面时如何关闭打开的Dialog/Bottom Sheet？

当NavigationBar层级高于弹窗所在页面时，导航跳转后弹窗不会自动关闭——因为弹窗挂载在根Navigator而非当前页面的Navigator下，页面销毁不会连带关闭弹窗。以下是几种实用的解决方法：

方法一：跳转前手动关闭所有模态路由 #

直接在导航跳转逻辑中，先循环关闭所有可弹出的路由（包括Dialog、BottomSheet等），再执行跳转。修改你的onItemTapped方法：

void onItemTapped(BuildContext context, int tabIndex) {
  if (tabIndex != currentIndex(GoRouter.of(context).location)) {
    // 获取根Navigator实例，确保能关闭所有全局弹窗
    final rootNavigator = Navigator.of(context, rootNavigator: true);
    // 循环关闭所有可弹出的路由
    while (rootNavigator.canPop()) {
      rootNavigator.pop();
    }
    // 执行导航跳转
    context.go(primaryDestinations[tabIndex].route);
  }
}

说明：使用rootNavigator: true可以获取到最顶层的Navigator，不管弹窗是通过当前页面Navigator还是根Navigator弹出的，都能被统一关闭。

方法二：通过全局NavigatorKey管理弹窗 #

定义一个全局的GlobalKey<NavigatorState>，绑定到GoRouter的根Navigator，之后直接通过这个Key来关闭弹窗：

1. 定义全局Key：

final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>();

2. 在GoRouter配置中绑定这个Key：

final GoRouter router = GoRouter(
  navigatorKey: rootNavigatorKey,
  routes: [
    // 你的路由配置
  ],
);

3. 修改onItemTapped方法：

void onItemTapped(BuildContext context, int tabIndex) {
  if (tabIndex != currentIndex(GoRouter.of(context).location)) {
    // 通过全局Key关闭所有弹窗
    while (rootNavigatorKey.currentState?.canPop() ?? false) {
      rootNavigatorKey.currentState!.pop();
    }
    context.go(primaryDestinations[tabIndex].route);
  }
}

说明：这种方式更灵活，在项目任何地方都可以通过这个全局Key管理弹窗状态，适合复杂场景。

方法三：监听GoRouter路由变化自动关闭弹窗 #

如果希望所有路由跳转时都自动关闭弹窗，可以在GoRouter的导航钩子中统一处理：

final GoRouter router = GoRouter(
  routes: [...],
  navigatorBuilder: (context, child) {
    return RouterListener(
      router: router,
      child: child,
    );
  },
);

// 自定义路由监听组件
class RouterListener extends StatefulWidget {
  final GoRouter router;
  final Widget child;

  const RouterListener({super.key, required this.router, required this.child});

  @override
  State<RouterListener> createState() => _RouterListenerState();
}

class _RouterListenerState extends State<RouterListener> {
  late VoidCallback _routerListener;

  @override
  void initState() {
    super.initState();
    _routerListener = () {
      // 路由变化时关闭所有弹窗
      final rootNavigator = Navigator.of(context, rootNavigator: true);
      while (rootNavigator.canPop()) {
        rootNavigator.pop();
      }
    };
    widget.router.addListener(_routerListener);
  }

  @override
  void dispose() {
    widget.router.removeListener(_routerListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

说明：这种方式无需在每个导航触发点手动处理，适合全局统一的弹窗关闭需求。

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