Flutter Widget 之package: go_router

是否在寻找路由API以便在Flutter应用程序中用URL在屏幕间导航，你或许需要一种能为应用快速添加深度链接的方法，那就用go_router

你将使用自己的URL模式和深层链接处理在屏幕之间导航。

首先，要初始化您的GoRouter实例,给它个用来定义路径和构建起的路由列表

GoRouter router = GoRouter(
    routers: [
        GoRoute(
            path: '/profile',
            builder: (context, state) => ProfileScreen(),
        ),
        GoRoute(
            path: '/signup',
            builder: (context, state) => SignupScreen(),
        ),
        GoRoute(
            path: '/explore',
            builder: (context, state) => ExploreScreen(),
        ),
        GoRoute(
            path: '/',
            builder: (context, state) => HomeScreen(),
        ),
    ],
);

当导航到该路径，构建器应该会返回所需现实的小部件。

请记住 go_router也像基于互联网的传统路由库一样带有path和query参数,因此也可通过URL传递信息

GoRoute(
    path: '/profile/:userid?fiilter=xyz',
    builder: (context, state) => ProfileScreen(
        userId: state.params['userid'],
        filter: state.queryParams[filter]
    )
)

切换到原生构造函数MateialApp.router，是的，编码加入新的路由器,这样就可导航了

GoRouter router = GoRouter(routes: [...]);

MaterialApp.router(
    routerConfig: router
)

应用内的导航可调用函数GoRouter.of(context).go并加入URL路径

ElevatedButton(
    child: const Text('Home'),
    onPressed: () => GoRouter.of(context).go('/'),
)

或使用GoRouter所属的便利扩展方法

ElevatedButton(
    child: const Text('Home'),
    onPressed: () => context.go('/'),
)

如果仅需在屏幕分段并显示一些路由常规小部件，比如切换路由的小部件BoottomNavigationBar，那该怎么办？

这样的话，可将既有路由包装在ShellRoute中

final GoRouter _router = GoRouter(
    foutes: [
        ShellRoute(
            routes: [...],
            builder: (context, state, child) {
                return BottomNav(child: child);
            },
        )
    ],
);

该路由将在导航内容周围呈现一个用户界面壳层。因此导航时，用户界面壳层固定不变/

此外导航也已就绪以古河Flutter的构建目标需求，能够处理Android和iOS系统的深度链接，也准备好支持用户所期望的互联网URL。

如果想了解有关package: go_router的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址