时间戳

首页 > 解决方案 > 如何使用带有 auto_route 的嵌套路由在 Flutter 中的屏幕之间导航

flutter - 如何使用带有 auto_route 的嵌套路由在 Flutter 中的屏幕之间导航

问题描述

我有一个使用 auto_routes 包的嵌套路由设置。它看起来像这样：

  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(
      path: '/',
      page: HomePage,
      children: [
        AutoRoute(
          path: 'dashboard',
          name: 'DashboardRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(
              path: '',
              page: DashboardPage,
            ),
            AutoRoute(
              path: ':regional',
              page: TopPlayersPage,
            ),
            AutoRoute(page: EditProfilePage),
            // AutoRoute(page: ProfilePage),
          ],
        ),
        AutoRoute(
          path: 'profile',
          name: 'ProfileRouter',
          page: ProfilePage,
        ),
        AutoRoute(
          path: 'search',
          name: 'SearchRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(
              path: '',
              page: SearchOverviewPage,
            ),
            AutoRoute(
              path: ':searchType',
              page: SearchPage,
            )
          ],
        ),
        AutoRoute(
          path: 'add_post',
          name: 'AddPostRouter',
          page: AddPostPage,
        ),
        AutoRoute(
          path: 'notifications',
          name: 'NotificationsRouter',
          page: NotificationsPage,
        ),
        AutoRoute(
          path: 'edit_profile',
          name: 'EditProfileRouter',
          page: EditProfilePage,
        )
      ],
    ),
  ],
...
);
)

上面的大部分部分都在 AutoTabsScaffold 中使用，它带有 auto_routes，以创建一个底部导航栏。

return AutoTabsScaffold(
      backgroundColor: LIGHT_MODE_WHITE,
      routes: const [
        DashboardRouter(),
        SearchRouter(),
        AddPostRouter(),
        NotificationsRouter(),
        EditProfileRouter(),
      ],

我现在想从 Dashboard 页面中包含的小部件导航到我的 ProfilePage，该页面未在 bottomNavigationBar 中使用。我尝试使用此代码执行此操作，但没有任何反应（参数“playerId”在我在 ProfileRouter 中使用的类中标记为必需）：

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        context.navigateTo(
          ProfileRouter(
            playerId: 'Test',
          ),
        );
      },
... 
}

当我将 ProfileRouter 换成在我的底部导航栏中使用的路由器时，它工作正常。知道如何解决这个问题吗？当我将 ProfileRouter 集成到我的路由设置的仪表板部分时，我可以使用 router.push() 访问它，但由于我也想从代码的其他部分访问此页面，所以这不是最远的方法我认为。

谢谢！

标签： flutterdartroutes

解决方案

找出问题所在。ProfilePage Route 必须向上移动一个级别。

推荐阅读