使用go_router嵌套导航时showModalBottomSheet显示异常求助

在嵌套底部导航栏的结构中，调用showModalBottomSheet时如果传入的是子Navigator的context，弹窗会被约束在子导航的视图范围内，导致显示异常（比如被底部导航栏遮挡或显示区域受限）。

方法1：使用GoRouter全局导航Key获取根context #

1. 先定义全局的根导航Key：

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

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

GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: [
    ShellRoute(
      builder: (context, state, child) {
        return YourBottomNavigationScaffold(child: child);
      },
      routes: [
        // 底部导航对应的各个子路由
      ],
    ),
  ],
);

3. 调用弹窗时传入根context：

showModalBottomSheet(
  context: _rootNavigatorKey.currentContext!,
  builder: (context) {
    return Container(
      height: 250,
      padding: const EdgeInsets.all(16),
      child: const Center(child: Text('正常显示的底部弹窗')),
    );
  },
);

方法2：直接获取根Navigator的context #

在子页面中调用弹窗时，通过Navigator.of指定获取根导航的context：

showModalBottomSheet(
  context: Navigator.of(context, rootNavigator: true),
  builder: (context) {
    // 弹窗内容组件
    return const SizedBox(
      height: 200,
      child: Center(child: Text('修复后的弹窗')),
    );
  },
);

嵌套导航结构会生成多个Navigator栈，默认的context属于当前子导航栈的上下文，而showModalBottomSheet需要挂载在根Navigator下才能占据全屏显示。通过指定根Navigator的context，就能让弹窗脱离子导航的约束，正常显示在页面最上层。

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