Android/Flutter中基于GoRouter的go()实现类返回动画的方案问询

以下是几个适配你场景的可行方案，满足用.go()统一跳转、有限状态机管控流程的需求：

1. 路由配置中区分场景，自定义过渡动画 #

在GoRouter的路由配置里，为流程最后一页的pageBuilder设置动态过渡逻辑：进入最后一页时用常规前进动画，跳转到主页面时触发从上到下的退出动画。

示例代码 #

final GoRouter router = GoRouter(
  routes: [
    // 主页面
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    // 流程中间页：从右到左的前进动画
    GoRoute(
      path: '/guide-step',
      pageBuilder: (context, state) => CustomTransitionPage(
        child: const GuideStepPage(),
        transitionsBuilder: (context, animation, _, child) {
          return SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(1.0, 0.0),
              end: Offset.zero,
            ).animate(animation),
            child: child,
          );
        },
      ),
    ),
    // 流程最后一页：动态切换过渡动画
    GoRoute(
      path: '/pairing-final',
      pageBuilder: (context, state) => CustomTransitionPage(
        child: const PairingFinalPage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // 通过extra参数判断是否是流程结束跳转
          if (state.extra == 'exit_to_home') {
            // 最后一页从上到下滑出的动画
            return SlideTransition(
              position: Tween<Offset>(
                begin: Offset.zero,
                end: const Offset(0.0, 1.0),
              ).animate(secondaryAnimation),
              child: child,
            );
          } else {
            // 进入最后一页时的从下往上动画
            return SlideTransition(
              position: Tween<Offset>(
                begin: const Offset(0.0, 1.0),
                end: Offset.zero,
              ).animate(animation),
              child: child,
            );
          }
        },
      ),
    ),
  ],
);

跳转触发 #

在流程最后一页完成操作时，传递标记参数跳转主页面：

// 流程结束按钮点击事件
void onFinishPressed(BuildContext context) {
  context.go('/', extra: 'exit_to_home');
}

2. 用replace方法配合自定义PageRoute #

如果不想在全局路由配置中做判断，可以在跳转主页面时，直接创建带有退出动画的自定义路由，用replace()替换当前路由栈，实现最后一页下滑消失的效果。

示例代码 #

void finishFlow(BuildContext context) {
  final router = GoRouter.of(context);
  router.replace(
    '/',
    pageBuilder: (context, state) => PageRouteBuilder(
      pageBuilder: (_, __, ___) => const HomePage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // 控制当前页面（最后一页）从上到下滑出
        final exitAnim = Tween<Offset>(
          begin: Offset.zero,
          end: const Offset(0.0, 1.0),
        ).animate(secondaryAnimation);
        return SlideTransition(position: exitAnim, child: child);
      },
    ),
  );
}

3. 结合有限状态机控制动画状态 #

既然你已经用有限状态机管理流程，可以在状态机中新增FlowFinished状态，页面监听该状态后，自动触发带有退出动画的跳转，让流程逻辑和路由动画更好解耦：

1. 在状态机中添加完成状态：

class FlowFinished extends FlowState {}

2. 页面中监听状态变化并跳转：

@override
void initState() {
  super.initState();
  flowStateMachine.stream.listen((state) {
    if (state is FlowFinished) {
      context.go('/', extra: 'exit_to_home');
    }
  });
}

后续的动画逻辑和方案1一致，通过路由配置中的extra参数切换过渡效果。

内容的提问来源于stack exchange，提问作者user20532