如何在go_router中为.go方法设置动态页面过渡动画

要实现动态选择跳转动画，核心是利用GoRouter路由跳转时的extra参数传递动画配置，再在pageBuilder中根据这个参数动态切换过渡效果，具体实现如下：

1. 定义动画类型枚举（可选，更规范） #

先定义一个枚举来标识不同的动画类型，避免字符串硬编码：

enum PageTransitionType {
  slideFromRight,
  slideFromLeft,
  slideFromTop,
  slideFromBottom,
  // 可根据需求扩展更多动画类型
}

2. 修改GoRouter的pageBuilder逻辑 #

在每个路由的pageBuilder中，读取state.extra传递的动画类型，默认保留原有动画作为兜底：

final router = GoRouter(
  initialLocation: '/inbox',
  routes: <GoRoute>[
    GoRoute(
      path: '/inbox',
      pageBuilder: (BuildContext context, GoRouterState state) {
        // 获取传递的动画类型，默认使用slideFromRight
        final transitionType = state.extra as PageTransitionType? ?? PageTransitionType.slideFromRight;
        
        switch(transitionType) {
          case PageTransitionType.slideFromLeft:
            return PageTransition.slideFromLeft(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: EmailPage(),
              ),
              state: state,
            );
          case PageTransitionType.slideFromTop:
            return PageTransition.slideFromTop( // 假设你已实现该动画方法
              myChildWidget: Layout(
                context: context,
                state: state,
                child: EmailPage(),
              ),
              state: state,
            );
          default: // 默认使用slideFromRight
            return PageTransition.slideFromRight(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: EmailPage(),
              ),
              state: state,
            );
        }
      },
    ),
    GoRoute(
      path: '/email/inbox/:id',
      pageBuilder: (BuildContext context, GoRouterState state) {
        final transitionType = state.extra as PageTransitionType? ?? PageTransitionType.slideFromLeft;
        
        switch(transitionType) {
          case PageTransitionType.slideFromRight:
            return PageTransition.slideFromRight(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: const EmailDetailsPage(),
              ),
              state: state,
            );
          case PageTransitionType.slideFromBottom:
            return PageTransition.slideFromBottom( // 假设你已实现该动画方法
              myChildWidget: Layout(
                context: context,
                state: state,
                child: const EmailDetailsPage(),
              ),
              state: state,
            );
          default: // 默认使用slideFromLeft
            return PageTransition.slideFromLeft(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: const EmailDetailsPage(),
              ),
              state: state,
            );
        }
      },
    ),
    GoRoute(
      path: '/menu',
      pageBuilder: (BuildContext context, GoRouterState state) {
        final transitionType = state.extra as PageTransitionType? ?? PageTransitionType.slideFromRight;
        
        switch(transitionType) {
          case PageTransitionType.slideFromLeft:
            return PageTransition.slideFromLeft(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: const MenuPage(),
              ),
              state: state,
            );
          default:
            return PageTransition.slideFromRight(
              myChildWidget: Layout(
                context: context,
                state: state,
                child: const MenuPage(),
              ),
              state: state,
            );
        }
      },
    )
  ],
);

3. 动态指定动画跳转 #

调用go方法时，通过extra参数传递想要的动画类型：

// 使用slideFromLeft动画跳转到/inbox
GoRouter.of(context).go('/inbox', extra: PageTransitionType.slideFromLeft);

// 使用slideFromRight动画跳转到邮件详情页
GoRouter.of(context).go('/email/inbox/123', extra: PageTransitionType.slideFromRight);

// 不传递extra参数时，使用路由默认的动画
GoRouter.of(context).go('/menu');

补充说明 #

• 若不想用枚举，也可直接传递字符串（如'slideFromLeft'），但枚举类型更安全，能避免拼写错误。
• 如果你的PageTransition支持更多自定义配置（如动画时长、曲线），可以直接把完整的配置对象作为extra传递，灵活性更高。

内容的提问来源于stack exchange，提问作者Randal Andrade Nunes