使用GoRouter如何让StatefulShellBranch子页面隐藏底部导航栏？

问题核心是你当前把SetTimer和CountDownPage作为/home的子路由，它们会被嵌套在StatefulShellRoute的导航壳（带底部导航栏的ScaffoldWithNestedNavigation）里，所以会显示底部导航栏。要让这两个页面独立，需将它们配置为根级路由，直接用根导航器跳转，脱离嵌套的shell导航器。

修改步骤： #

1. 调整路由配置
   把settimer和countdown从/home的子路由中移出，作为GoRouter根routes的直接子路由，并指定使用_rootNavigatorKey（确保用根导航器打开）：

final goRouter = GoRouter(
  initialLocation: '/home',
  navigatorKey: _rootNavigatorKey,
  debugLogDiagnostics: true,
  routes: [
    // 独立根路由：SetTimer和CountDownPage
    GoRoute(
      path: '/settimer',
      navigatorKey: _rootNavigatorKey,
      builder: (context, state) {
        return SetTimer();
      },
    ),
    GoRoute(
      path: '/countdown',
      navigatorKey: _rootNavigatorKey,
      builder: (context, state) {
        return CountDownPage();
      },
    ),
    // 原有的底部导航栏shell路由保持不变
    StatefulShellRoute.indexedStack(
      builder: (context, state, navigationShell) {
        return ScaffoldWithNestedNavigation(navigationShell: navigationShell);
      },
      branches: [
        StatefulShellBranch(
          navigatorKey: _shellNavigatorHomeKey,
          routes: [
            GoRoute(
              path: '/home',
              builder: (BuildContext context, GoRouterState state) =>
                  const MyHomePage(),
              // 移除原来的settimer、countdown子路由
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: _shellNavigatorStatsKey,
          routes: [
            GoRoute(
              path: '/statspage',
              builder: (BuildContext context, GoRouterState state) =>
                  const StatsPage(),
            ),
          ],
        ),
        StatefulShellBranch(
          navigatorKey: _shellNavigatorMoreKey,
          routes: [
            GoRoute(
              path: '/morepage',
              builder: (BuildContext context, GoRouterState state) =>
                  const MorePage(),
            ),
          ],
        ),
      ],
    ),
  ],
);

2. 修改跳转代码
   从SetTimer跳转到CountDownPage时，直接使用根路径：

GoRouter.of(context).go('/countdown');

原理说明 #

• StatefulShellRoute分支里的路由会使用各自的shell导航器，被包裹在带底部导航栏的父组件中；
• 根级路由使用_rootNavigatorKey，会直接在根导航器中打开页面，不会继承shell的底部导航栏布局，实现页面独立显示。

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