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

mzillmmw  于 2023-02-20  发布在  Flutter
关注(0)|答案(2)|浏览(452)

在我的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_routeradd_account_page中实现嵌套导航?如果可以,如何实现?
谢谢。

zwghvu4y

zwghvu4y1#

如果您的目的是到达AccountInfoStep(),则应在您的案例中添加指向此构建器的完整路径:
context.push("/accounts_page/account_info_step")
我假设您的顶级路由缺少name来表示使用context.pushNamed()的正确嵌套

arknldoa

arknldoa2#

我认为你试图创建嵌套导航的方式是不正确的。而且你不需要使用ShellRoute,如果你想创建一个持久的底部导航栏,只改变子导航栏,同时保持底部导航栏在底部,你可以使用 shell 路径。

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:untitled/homepage.dart';
import 'package:untitled/test_page.dart';

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

class MyRouter{
  static final router = GoRouter(
    navigatorKey: _navigatorKey,
    initialLocation: "/accounts_page",
    routes: [
      GoRoute(
          name: "accounts_page",
          path: "/accounts_page",
          builder: (context, state) => const MyHomePage(),
          routes: <RouteBase>[
            GoRoute(
              name: "account_info_step",
              path: "account_info_step",
              builder: (context, state) => const TestPage(),
            ),
            GoRoute(
              name: "account_type_step",
              path: "account_type_step",
              builder: (context, state) => const TestPage(),
            ),
            GoRoute(
              name: "account_detail_step",
              path: "account_detail_step",
              builder: (context, state) => const TestPage(),
            ),
          ]
      ),
    ],
  );
}

我想这就是你要找的。另外,请注意,你不需要在嵌套屏幕的路径中添加“/”。要导航到那些嵌套屏幕,你可以做一些事情
就像这样:

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

相关问题