如何在 go_router 中使用 NavigationBar？ |扑

Question

我目前正在努力用 go_router 重构我的路由代码。

我已经得到了一些简单的路由，例如 /signin 和 /signup，但是当我尝试使路由与具有多个屏幕的 BottomNavigationBar 一起工作时，问题就来了。我想为他们每个人设置一条单独的路线，例如 /home、/events 和 /profile。

我发现我必须以某种方式 return 具有不同参数的相同小部件，以防止在按下 BottomNavigationBarItem 时整个屏幕发生变化，而是仅更新 BottomNavigationBar 上方的部分，这将是屏幕本身。

我想到了一个非常棘手的解决方案：

GoRoute(
  path: '/:path',
  builder: (BuildContext context, GoRouterState state) {
    final String path = state.params['path']!;

    if (path == 'signin') {
      return const SignInScreen();
    }

    if (path == 'signup') {
      return const SignUpScreen();
    }

    if (path == 'forgot-password') {
      return const ForgotPasswordScreen();
    }

    // Otherwise it has to be the ScreenWithBottomBar

    final int index = getIndexFromPath(path);

    if (index != -1) {
      return MainScreen(selectedIndex: index);
    }

    return const ErrorScreen();
  }
)

这看起来不太好，无法添加像 /profile/settings/appearance 或 /events/:id.

这样的子路由

我想要像这样简单易懂的东西：

GoRoute(
  path: '/signin',
  builder: (BuildContext context, GoRouterState state) {
    return const SignInScreen();
  }
),
GoRoute(
  path: '/signup',
  builder: (BuildContext context, GoRouterState state) {
    return const SignUpScreen();
  }
),
GoRoute(
  path: '/home',
  builder: (BuildContext context, GoRouterState state) {
    return const ScreenWithNavBar(selectedScreen: 1);
  }
),
GoRoute(
  path: '/events',
  builder: (BuildContext context, GoRouterState state) {
    return const ScreenWithNavBar(selectedScreen: 2);
  },
  routes: <GoRoute>[
    GoRoute(
      path: ':id',
      builder: (BuildContext context, GoRouterState state) {
        return const EventScreen();
      }
    )
  ]
)

有什么方法可以实现这种行为吗？

Answer 1

这是 go_router 的 an outstanding feature request，我希望在接下来的几周内解决。敬请期待。

如何在 go_router 中使用 NavigationBar？ |扑

How to work with NavigationBar in go_router? | Flutter

routes

dart

flutter

gorouter