Flutter：使用 go_router 在页面内嵌套导航

Question

在我的 Flutter 应用程序中，我使用go_router在页面之间导航。

以下是我的应用程序中的当前页面：

• accounts_page
• add_account_page
• import_accounts_page

现在，我想在 内部实现嵌套导航add_account_page，因此我可以使用多个步骤添加新帐户，比方说：

• account_info_step
• account_type_step
• account_detail_step

这是我尝试过的：

  final _navigatorKey = GlobalKey<NavigatorState>();
  final _addAccountNavigatorKey = GlobalKey<NavigatorState>();

  late final router = GoRouter(
    navigatorKey: _navigatorKey,
    initialLocation: "/accounts_page",
    routes: [
      ShellRoute(
        navigatorKey: _addAccountNavigatorKey,
        builder: (context, state, child) => AddAccountPage(child: child),
        routes: [
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: "account_info_step",
            path: "/account_info_step",
            builder: (context, state) => const AccountInfoStep(),
          ),
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: "account_type_step",
            path: "/account_type_step",
            builder: (context, state) => const AccountTypeStep(),
          ),
          GoRoute(
            parentNavigatorKey: _addAccountNavigatorKey,
            name: "account_detail_step",
            path: "/account_detail_step",
            builder: (context, state) => const AccountDetailStep(),
          ),
        ],
      ),
      GoRoute(
        name: "accounts_page",
        path: "/accounts_page",
        pageBuilder: (context, state) => const AccountsPage(),
      ),
      GoRoute(
        name: "import_accounts_page",
        path: "/import_accounts_page",
        pageBuilder: (context, state) => const ImportAccountsPage(),
      ),
    ],
  );

然后我打电话context.pushNamed("account_info_step")，但没有任何反应。

那么是否可以使用go_router在内部实现嵌套导航，add_account_page如果可以，如何实现？

谢谢。

Answer 1

我认为您尝试创建嵌套导航的方式不正确。另外，您不需要使用 ShellRoute，如果您想创建类似持久底部导航栏的内容并仅更改子项，同时将底部导航栏保留在底部，则可以使用 shell 路由。

\n

import 'package:flutter/material.dart';\nimport 'package:go_router/go_router.dart';\nimport 'package:untitled/homepage.dart';\nimport 'package:untitled/test_page.dart';\n\nfinal _navigatorKey = GlobalKey<NavigatorState>();\n// final _addAccountNavigatorKey = GlobalKey<NavigatorState>();\n\nclass MyRouter{\n  static final router = GoRouter(\n    navigatorKey: _navigatorKey,\n    initialLocation: "/accounts_page",\n    routes: [\n      GoRoute(\n          name: "accounts_page",\n          path: "/accounts_page",\n          builder: (context, state) => const MyHomePage(),\n          routes: <RouteBase>[\n            GoRoute(\n              name: "account_info_step",\n              path: "account_info_step",\n              builder: (context, state) => const TestPage(),\n            ),\n            GoRoute(\n              name: "account_type_step",\n              path: "account_type_step",\n              builder: (context, state) => const TestPage(),\n            ),\n            GoRoute(\n              name: "account_detail_step",\n              path: "account_detail_step",\n              builder: (context, state) => const TestPage(),\n            ),\n          ]\n      ),\n    ],\n  );\n}\n

\n

我想这就是您正在寻找的。另请注意，您不需要在嵌套屏幕的路径中添加“/”。\n要导航到这些嵌套屏幕，您可以执行某些操作

\n\n

像这样：-

\n

context.go('/accounts_page/account_info_step');\n

\n

编辑：我已经理解您的要求，我认为这会有所帮助。\n仅在您的代码中，

\n

GoRoute(\n              name: "account_type_step",\n              path: "account_type_step",\n              builder: (context, state) => const TestPage(),\n            ),\n

\n

让\xe2\x80\x99s 说你不\xe2\x80\x99s 想要这个屏幕中的底部导航栏，有一个名为parentNavigatorKey 的参数。您可以使用 rootNavigator Key _navigatorKey 进行设置。

\n

GoRoute(\n          parentNavigatorKey: _navigatorKey,\n          name: "account_type_step",\n          path: "account_type_step",\n          builder: (context, state) => const TestPage(),  \n),\n

\n

Answer 2

如果您的目的是获得AccountInfoStep()通往此构建器的完整路径，则应在您的情况下添加：

context.push("/accounts_page/account_info_step")

我假设您缺少name代表正确嵌套的顶级路线以使用context.pushNamed()