Flutter go_router ShellRoute

ShellRoute 是 go_router 路由库中的一个类，它的主要功能是在匹配的子路由周围显示一个 UI shell。

ShellRoute 提供了一种机制，允许开发者为一组子路由定义一个统一的用户界面（UI）结构，这个结构被称为 "UI shell"。这个 "UI shell" 可以包含一些常见的 UI 元素，如导航栏、侧边栏、底部导航等，这些元素在多个页面中都是相同或相似的。

举个例子，假设您正在开发一个应用，其中有三个页面：首页、消息页和设置页。这三个页面都有一个相同的顶部导航栏。而不是在每个页面单独定义这个导航栏，您可以使用 ShellRoute 来定义一个 UI shell，其中包含这个导航栏，然后将这三个页面作为子路由添加到这个 shell 中。这样，当用户在这三个页面之间导航时，导航栏始终保持一致，并且只需要定义一次。

功能

当 ShellRoute 被添加到 GoRouter 或 GoRoute 的路由列表中时，它会使用新的 Navigator 来显示任何匹配的子路由，而不是将它们放在根 Navigator 上。

使用方法

要在不同的 Navigator 上显示子路由，为其提供一个与 GoRouter 或 ShellRoute 构造函数中提供的键匹配的 parentNavigatorKey。

由匹配的子路由构建的小部件成为构建器的子参数。

示例

final GlobalKey<NavigatorState> _rootNavigatorKey =
	GlobalKey<NavigatorState>();
	
final GoRouter _router = GoRouter(
  navigatorKey: _rootNavigatorKey,
  initialLocation: '/a',
  routes: [
    ShellRoute(
      navigatorKey: _shellNavigatorKey,
      builder: (context, state, child) {
        return ScaffoldWithNavBar(child: child);
      },
      routes: [
        GoRoute(
          path: '/a',
          builder: (context, state) {
            return const ScreenA();
          },
          routes: <RouteBase>[
            GoRoute(
              path: 'details',
              builder: (
              BuildContext context,
               GoRouterState state) {
                return const DetailsScreen(label: 'A');
              },
            ),
          ],
        ),
        GoRoute(
          path: '/b',
          builder: (
	       BuildContext context,
           GoRouterState state) {
            return const ScreenB();
          },
          routes: <RouteBase>[
            GoRoute(
              path: 'details',
              parentNavigatorKey: _rootNavigatorKey,
              builder: (
               BuildContext context,
               GoRouterState state) {
                return const DetailsScreen(label: 'B');
              },
            ),
          ],
        ),
      ],
    ),
  ],
);

构建器示例

ShellRoute(
  builder: (
	  BuildContext context, 
	  GoRouterState state, 
	  Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (
	      BuildContext context, 
	      GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
);

本文作者：Maeiee

本文链接：Flutter go_router ShellRoute

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！