如何使用参数化路由作为 GoRoute 的 StatefulShellRoute 的根

Question

我有一个 flutter 应用程序，我想向其中添加状态导航。我希望拥有它，以便您可以查看“Foos”列表，然后选择要查看的 Foo。在 Foo 详细信息页面上，我想要有 3 个选项卡，并在这三个选项卡上有状态导航。网址看起来像这样：

• /foo
  • /：ID
    • /页A
    • /页B
    • /页C

我正在按照这个示例合并 go_router 的StatefulShellRoute. 该示例看起来与我想要的一模一样，除了当我使用参数化路由将其添加到我的应用程序时，我收到此错误：

The default location of a StatefulShellBranch cannot be a parameterized route

该错误似乎意味着我无法在参数化的页面上启动有状态分支，但这就是我希望开始带有选项卡的嵌套导航的地方。有没有办法解决这个问题或有其他方法来实现这个目标？

这是我尝试设置的路由器：

final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return MyHomePage();
      },
      routes: [
        GoRoute(
            path: 'foo',
            builder: (BuildContext context, GoRouterState state) {
              return const FooListScreen();
            },
            routes: [
              StatefulShellRoute.indexedStack(
                  builder: (context, state, navigationShell) {
                    return Scaffold(body: Center(child: Text("fix this scaffold")));
                  },
                  branches: [
                    StatefulShellBranch(
                        navigatorKey: _fooNavigatorKey,
                        routes: [
                          GoRoute(
                              name: "fooDetails",
                              path: ":id",
                              builder: (context, state) => FooDetailScreen(
                                  id: int.parse(
                                      state.pathParameters['id'] ?? "0"))),
                        ]),
                  ]),
            ]),
      ],
    ),
  ],
);

我正在使用 Flutter 3.7.11 和 go_router 8.0.5

Answer 1

一种解决方法可能是在参数化路线之前添加虚拟路线，请参阅此示例：

final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return MyHomePage();
      },
      routes: [
        GoRoute(
            path: 'foo',
            builder: (BuildContext context, GoRouterState state) {
              return const FooListScreen();
            },
            routes: [
              StatefulShellRoute.indexedStack(
                  builder: (context, state, navigationShell) {
                    return Scaffold(body: Center(child: Text("fix this scaffold")));
                  },
                  branches: [
                    StatefulShellBranch(
                        navigatorKey: _fooNavigatorKey,
                        routes: [

                          GoRoute(
                              name: "dummyRoute",
                              path: "/dummy",
                              builder: (context, state) => DummyScreen(),
    ),
                          GoRoute(
                              name: "fooDetails",
                              path: ":id",
                              builder: (context, state) => FooDetailScreen(
                                  id: int.parse(
                                      state.pathParameters['id'] ?? "0"))),
                        ]),
                  ]),
            ]),
      ],
    ),
  ],
);