Flutter：如何在导航操作时为Widget添加动画效果？

在Widget首次创建时，我们可以在initState中调用animationController.forward()来触发初始动画。针对其他导航场景，处理方式如下：

1. 同一路由弹出（same route pop） #

当当前路由被弹出（比如用户按返回键、调用Navigator.pop(context)），需要触发反向动画后再完成路由弹出。可以用WillPopScope组件监听返回事件：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      await _animationController.reverse();
      return true; // 允许路由弹出
    },
    child: YourAnimatedWidget(),
  );
}

如果是手动调用Navigator.pop，也可以先执行动画再弹出，确保动画完整执行。

2. 新路由推入（new route push） #

推入新路由时，当前页面的Widget若需要执行退出动画（如淡出、收缩），可以在触发导航前手动启动动画，等待动画完成后再推入路由：

// 启动当前页面的退出动画
_animationController.reverse();
// 等待动画结束后跳转
await Future.delayed(_animationController.duration!);
Navigator.push(context, MaterialPageRoute(builder: (_) => NewTargetRoute()));

也可以自定义NavigatorObserver，在didPush回调中通知当前页面的Widget执行动画，这种方式更适合全局统一处理。

3. 新路由弹出（new route pop） #

当新路由被弹出、回到当前页面时，需要触发恢复动画。可以利用Navigator.push的then回调，在路由返回时启动动画：

Navigator.push(context, MaterialPageRoute(builder: (_) => NewTargetRoute()))
  .then((_) {
    // 新路由关闭后，播放当前页面的恢复动画
    _animationController.forward();
  });

另外，也可以通过RouteAware和RouteObserver监听页面激活状态：给Widget混入RouteAware，在didPopNext方法中调用_animationController.forward()，这种方式能更精准地响应路由切换事件。

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