来啦！Flutter 的go_router包高级路由和过渡篇

前端

2023-11-09 15:04:04

Flutter 的 go_router 包的高级路由和过渡

go_router 包是 Flutter 中一个功能强大的路由包，它提供了许多高级功能，包括路由过渡、命名路由和导航守卫。

默认页面过渡

go_router 内置支持默认的页面过渡和自定义页面过渡。默认情况下，go_router 会为组件树中的APP类型使用合适的页面过渡。

默认情况下，APP组件树中的第一个页面使用 FadeTransition，其他页面使用 SlideTransition。这些过渡可以在 RouteBuilder 中被覆盖。

自定义页面过渡

go_router 也支持自定义页面过渡。要使用自定义页面过渡，您需要在 RouteBuilder 中指定一个 TransitionBuilder。

TransitionBuilder 接受一个 BuildContext 和一个 AnimationController 作为参数，并返回一个 Widget。这个 Widget 就是页面过渡的动画。

  MaterialApp.router(
    routeInformationProvider: _routeInformationProvider,
    routeInformationParser: _routeInformationParser,
    routerDelegate: _routerDelegate,
    transitionDelegate: TransitionDelegate<CustomTransition>(
      transitionBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    ),
  );

命名路由

go_router 也支持命名路由。命名路由允许您使用字符串来引用路由，这使得您的代码更加易读和可维护。

要使用命名路由，您需要在 RouteBuilder 中指定一个 name 属性。

  RouteBuilder(
    name: 'home',
    path: '/',
    builder: (BuildContext context) => const HomePage(),
  ),

导航守卫

go_router 还支持导航守卫。导航守卫允许您在用户导航到新路由之前执行一些代码。

要使用导航守卫，您需要在 RouteBuilder 中指定一个 guard 属性。

  RouteBuilder(
    name: 'home',
    path: '/',
    builder: (BuildContext context) => const HomePage(),
    guard: (BuildContext context, TransitionBase transition) {
      // Perform some checks before the user navigates to the home page.
      return true;
    },
  ),