flutter 有了go_router,我应该如何配置我的路由器来使用ShellRoute创建类似Twitter的导航?

e37o9pze  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(164)

我试图创建一个像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的详细信息页面。换句话说,如果用户在主页选项卡中,则打开主页选项卡中的详细信息页面,如果用户在搜索选项卡中,则打开搜索选项卡中的详细信息页面,依此类推。

fnx2tebb

fnx2tebb1#

如果你只想使用导航栏在两个视图之间导航,你不需要使用路由。这将使应用程序过于复杂,需要担心路由上下文。导航栏与内部视图切换配合良好。

class MainWidget extends StatefulWidget {
  @override
  MainWidgetState createState() => MainWidgetState();
}

class MainWidgetState extends State<MainWidget> {

    var views = [HomeWidget(), SearchWidget()];
    var currentPageIndex = 0;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            bottomNavigationBar: NavigationBar(
                elevation: 0,
                onDestinationSelected: (int index) {
                setState(() {
                    currentPageIndex = index;
                });
                },
                selectedIndex: currentPageIndex,
                destinations: <Widget>[
                    NavigationDestination(
                        icon: Icon(
                            Icons.home,
                            size: 35.0,
                        ),
                        label: 'Home',
                    ),
                    NavigationDestination(
                        icon: Icon(
                            Icons.search,
                            size: 35.0,
                        ),
                        label: 'Search',
                    ),
                ],
            ),
            body: views[currentPageIndex]
        )
    }
}

相关问题