我试图创建一个像Twitter的导航,在底部导航栏中有2个标签,主页标签和搜索标签。在主页选项卡中,有一个tweet列表,当用户点击一条tweet时,它会导航到所点击tweet的详细信息屏幕。类似地,在搜索选项卡中,用户可以使用一些关键字搜索推文并获得推文列表,并且点击推文将用户导航到其详细信息屏幕。因此,用户可以在home选项卡和search选项卡中导航到详细信息页面。
我为这个场景编写了一个路由器,修改了ShellRoute的示例代码,如下所示:
// I used the ShellRoute to create a persistent navigation bar
final GlobalKey<NavigatorState> _rootNavigatorKey =
GlobalKey<NavigatorState>();
final GoRouter _router = GoRouter(
navigatorKey: _rootNavigatorKey,
initialLocation: '/home',
routes: [
ShellRoute(
navigatorKey: _shellNavigatorKey,
builder: (context, state, child) {
return ScaffoldWithNavBar(child: child);
},
routes: [
GoRoute(
path: '/home',
builder: (context, state) {
return const Home();
},
routes: <RouteBase>[
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(tweet_id: 'id');
},
),
],
),
GoRoute(
path: '/search',
builder: (BuildContext context, GoRouterState state) {
return const Search();
},
routes: <RouteBase>[
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(tweet_id: 'id');
},
),
],
),
],
),
],
);
我的问题是,我为详细信息屏幕定义了两个路径,'/home/details'和'/search/details',但这是我解释过的创建导航的正确方法吗?我真的需要在每条路由('/home','/search')中定义一条'details'路由,即使它到达了相同的详细信息页面?如果是这样的话,如果我添加一个新的选项卡(e.g.书签选项卡),用户还可以在其中导航到详细信息页面,例如:
GoRoute
|-- ShellRoute
|-- GoRoute(home tab)
| |-- GoRoute(details)
|
|-- GoRoute(search tab)
| |-- GoRoute(details)
|
|-- GoRoute(bookmarks tab)
|-- GoRoute(details)
我实际上想要的是,当应用程序接收到像/details/<tweet-id>
这样的路径时,在当前选项卡中显示指定tweet的详细信息页面。换句话说,如果用户在主页选项卡中,则打开主页选项卡中的详细信息页面,如果用户在搜索选项卡中,则打开搜索选项卡中的详细信息页面,依此类推。
1条答案
按热度按时间fnx2tebb1#
如果你只想使用导航栏在两个视图之间导航,你不需要使用路由。这将使应用程序过于复杂,需要担心路由上下文。导航栏与内部视图切换配合良好。