GoRouter中的ShellRoute是什么

ShellRoute 是 GoRouter 中的一个特性，它允许你为你的应用定义一个或多个“壳”页面（Shell Pages）。这些壳页面可以作为应用中其他页面的共同父级，允许你共享导航栏、侧边栏、底部导航栏等UI组件，而无需在每个页面中重复定义这些组件。ShellRoute 特别适合那些具有共同布局或导航结构的页面集合。

使用场景

假设你的应用有一个底部导航栏，这个导航栏在多个页面间是共享的。通常，你可能需要在每个页面中重复实现这个导航栏。但是，通过使用 ShellRoute，你可以创建一个包含底部导航栏的壳页面，然后将所有需要显示这个导航栏的页面作为子路由。这样，你就只需要在壳页面中定义一次底部导航栏，而不是在每个子页面中都定义一遍。

如何使用 ShellRoute

下面是一个简单的示例，演示了如何使用 ShellRoute 来定义一个带有底部导航栏的壳页面：

final goRouter = GoRouter(
  routes: [
    ShellRoute(
      builder: (BuildContext context, GoRouterState state, Widget child) {
        // 这里是壳页面的布局
        return Scaffold(
          appBar: AppBar(title: Text('App Shell')),
          body: child, // 子路由的内容将会渲染在这里
          bottomNavigationBar: BottomNavigationBar(
            // 底部导航栏配置...
          ),
        );
      },
      routes: [
        // 定义子路由
        GoRoute(
          path: '/page1',
          builder: (BuildContext context, GoRouterState state) {
            return Page1();
          },
        ),
        GoRoute(
          path: '/page2',
          builder: (BuildContext context, GoRouterState state) {
            return Page2();
          },
        ),
        // 更多子路由...
      ],
    ),
  ],
);

在这个示例中，ShellRoute 定义了一个壳页面，这个壳页面包含一个 Scaffold，Scaffold 有一个 AppBar 和一个 BottomNavigationBar。child 参数是当前激活的子路由的内容，它将会被渲染在壳页面的 body 中。这样，无论你导航到 /page1 还是 /page2，底部导航栏都会被保留。

优点

• 代码重用：通过使用 ShellRoute，你可以在多个页面间重用共同的UI组件，减少重复代码。
• 统一的布局和风格：ShellRoute 有助于保持应用的布局和风格一致性，同时也简化了布局的管理。
• 灵活的导航管理：ShellRoute 使得在具有共同壳页面的子页面间的导航变得更加直接和简洁。

总之，ShellRoute 是 GoRouter 提供的一个强大特性，它通过允许定义共享的壳页面，简化了具有共同布局结构页面的导航和布局管理。