Flutter - 使用 Getx 进行嵌套（子）导航

Question

我需要完成这个用例。 我有一个带有页眉和页脚的仪表板。可以说，页脚有底部导航栏，页眉有一些带有公司详细信息的横幅。 我需要在仪表板内呈现产品、收藏夹、订单组件。

所以，基本上，保持相同的导航栏和标题横幅，只需要渲染中间的正文部分。

这是我的路由片段：

GetPage(
      name: '/dashboard', 
      page: () => Dashboard(), 
      middlewares: [
        AuthGuard(),
      ],
      children: [
        GetPage(
          name: '/products',
          page: () => Products(),
        ),
        GetPage(
          name: '/favorites',
          page: () => Favorites(),
        ),
        GetPage(
          name: '/orders',
          page: () => Orders(),
        ),
    ]),

示例视频：

PS：Gif 和代码片段取自互联网。但场景是一样的。

PS：以前我使用 auto_route，这个用例可以通过将 AutoRouter() 小部件放置在组件内部以渲染其中的子组件来完成。但是在使用 Get.toNamed() 和 auto_route 时遇到了问题。并且无法添加与 auto_route 的绑定。请考虑一下，我需要使用 GetX 路由来完成此操作。

Answer 1

如果你导入了GetX lib，你可以像下面这样实现。

https://github.com/jonataslaw/getx/blob/master/documentation/en_US/route_management.md#nested-navigation