dart 如何在`ShellRoute`上导航到子路由时隐藏底部导航?

e5nszbig  于 2023-05-11  发布在  Shell
关注(0)|答案(1)|浏览(138)

我正在尝试创建以下导航:

|_ShellRoute
  |_GoRoute /a (needs bottomNav)
    |_GoRoute /a/nested/:id (does not need bottomNav)
  |_GoRoute /b (needs bottomNav)
  |_GoRoute /c (needs bottomNav)

但是,当我导航到/a/nested/1时,底部导航仍然显示。
我的路由代码(我使用类型安全路由,但我认为这仍然适用于“正常”go_router):

final rootNavigatorKey = GlobalKey<NavigatorState>();

final router = GoRouter(
  routes: $appRoutes,
  initialLocation: '/a',
  navigatorKey: rootNavigatorKey,
);

final shellNavigatorKey = GlobalKey<NavigatorState>();

@TypedShellRoute<BottomShellRoute>(routes: [
  TypedGoRoute<ARoute>(path: '/a', routes: [
    TypedGoRoute<ANestedRoute>(path: 'nested/:id'),
  ]),
  TypedGoRoute<BRoute>(path: '/b'),
  TypedGoRoute<CRoute>(path: '/c'),
])
class BottomShellRoute extends ShellRouteData {
  const BottomShellRoute();

  static final GlobalKey<NavigatorState> $navigatorKey = shellNavigatorKey;

  @override
  Widget builder(BuildContext context, GoRouterState state, Widget navigator) => BottomShellScreen(
        location: state.location,
        child: navigator,
      );
}

有没有办法让这条路线不显示底部导航?

nhhxz33t

nhhxz33t1#

一种方法是在某些路线上“隐藏”底部导航栏。这意味着底部的导航栏将 * 总是 * 在小部件树中,只是隐藏在视图中。
此逻辑将存在于BottomShellScreen小部件的构建方法中。

Widget build(BuildContext context) {
   if (location == '/a/nested/:id'){
      return const SizedBox.shrink();
   }

   return ...;
}

相关问题