Flutter 偏爱之路由包 go_router - 高级路由 - 异步数据 & 导航构建器 & Web 历史

2023-09-26 17:48:14

前言

在 Flutter 中，路由是管理应用程序中不同屏幕或视图之间导航的过程。go_router 是一个流行的 Flutter 路由包，它提供了许多高级功能，例如异步数据、导航构建器和 Web 历史。

异步数据

有时，我们希望异步加载数据。在这种情况下，我们可以将参数传递给屏幕，然后让屏幕自己进行查找。

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/detail',
      builder: (context, state) {
        final id = state.params['id']!;
        return FutureBuilder<User>(
          future: fetchUser(id),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return UserDetailScreen(user: snapshot.data!);
            } else {
              return const CircularProgressIndicator();
            }
          },
        );
      },
    ),
  ],
);

导航构建器

导航构建器允许我们根据当前路由来创建自定义小部件。这对于创建自定义导航栏或底部栏非常有用。

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/detail',
      builder: (context, state) => const DetailPage(),
    ),
  ],
  navigatorBuilder: (context, state, child) {
    return CupertinoTabView(
      routes: [
        CupertinoPageRoute(builder: (context) => child),
      ],
    );
  },
);

Web 历史

go_router还支持 Web 历史。这意味着当用户在 Web 应用程序中导航时，浏览器的前进和后退按钮将按预期工作。

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/detail',
      builder: (context, state) => const DetailPage(),
    ),
  ],
  initialLocation: '/',
);