在我的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
中实现嵌套导航?如果可以,如何实现?
谢谢。
2条答案
按热度按时间zwghvu4y1#
如果您的目的是到达
AccountInfoStep()
,则应在您的案例中添加指向此构建器的完整路径:context.push("/accounts_page/account_info_step")
我假设您的顶级路由缺少
name
来表示使用context.pushNamed()
的正确嵌套arknldoa2#
我认为你试图创建嵌套导航的方式是不正确的。而且你不需要使用ShellRoute,如果你想创建一个持久的底部导航栏,只改变子导航栏,同时保持底部导航栏在底部,你可以使用 shell 路径。
我想这就是你要找的。另外,请注意,你不需要在嵌套屏幕的路径中添加“/”。要导航到那些嵌套屏幕,你可以做一些事情
就像这样: