带有flutter go路由器的导航组件

Question

我有这个布局。

我的Go路由器代码：

final appRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
        path: '/',
        builder: (context, state) => HomePage(key: state.pageKey),
        routes: [
          GoRoute(
            path: 'dashboard',
            builder: (context, state) => DashboardPage(),
          ),
          GoRoute(
            path: 'audit',
            builder: (context, state) => const AuditPage(),
          ),
        ]),
  ],
  errorPageBuilder: (context, state) => MaterialPage(
    key: state.pageKey,
    child: Scaffold(
      body: Center(
        child: Text(state.error.toString()),
      ),
    ),
  ),
);

如果我想要正常的导航，我该怎么办。 因此，当我选择每个菜单时，它将用屏幕代替绿色面板。使用状态可能很容易。但是可以与Go Router一起使用。我看到嵌套导航文档。它令人困惑。

Autoroute软件包中提供了类似的东西。

Answer 1

StatefulShellRoute.indexedStack(
    builder: (context, state, navigationShell) {
      return BottomNavBarCustom(shell: navigationShell);
    },
    branches: [
      StatefulShellBranch(routes: [
        GoRoute(
          path: AppRouterName.homeView.path,
          builder: (context, state) => const HomeView(),
        ),
      ]),
      StatefulShellBranch(routes: [
        GoRoute(
          path: AppRouterName.settingsView.path,
          builder: (context, state) => const ProfileView(),
        ),
      ]),
      StatefulShellBranch(routes: [
        GoRoute(
          path: AppRouterName.financeView.path,
          builder: (context, state) => const FinanceView(),
        ),
      ]),
    ],
  ),
**you can use it like this. It will provide you with an index**