Flutter使用AnimatedSwitcher搭配SlideTransition切换组件时旧组件无滑出动画怎么办

错误原因 #

1. 自定义layoutBuilder逻辑错误
   AnimatedSwitcher默认的layoutBuilder会用Stack同时承载待退场的旧组件和待入场的新组件，保证两个动画可以同步执行。你重写的layoutBuilder直接返回新的currentChild，直接丢弃了旧组件，导致旧组件没有执行退场动画就直接消失。
2. 动画绑定逻辑错误
   你通过组件key判断使用入场/出场动画的逻辑不符合AnimatedSwitcher的运行规则：transitionBuilder会对旧、新两个组件分别回调，对新组件传入正向播放的animation（0→1），对旧组件传入反向播放的animation（1→0），动画的类型由当前组件是入场还是退场决定，和组件本身的类型无关。
3. Tween参数配置错误
   你定义的退场Tween是从屏幕左侧往中间移动，完全不符合你要的「组件向右侧滑出」的效果。

修复方案 #

删除你自定义的layoutBuilder，修改transitionBuilder的逻辑即可，修复后的AnimatedSwitcher代码如下：

AnimatedSwitcher(
  duration: const Duration(seconds: 1),
  transitionBuilder: (Widget child, Animation<double> animation) {
    // 入场动画：新组件从左侧滑入
    final enterTween = Tween<Offset>(begin: const Offset(-1, 0), end: Offset.zero);
    // 退场动画：旧组件向右侧滑出
    final exitTween = Tween<Offset>(begin: Offset.zero, end: const Offset(1, 0));
    return ClipRect(
      child: SlideTransition(
        position: animation.drive(
          animation.status == AnimationStatus.reverse ? exitTween : enterTween
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: child,
        ),
      ),
    );
  },
  child: _isLoginStepOne
    ? AppTextField(
        key: _mobileKey,
        controller: _mobileController,
        hint: Strings.mobileNumber,
        textInputType: TextInputType.phone,
      )
    : _buildPinCode(),
)

如果实际运行时发现滑动方向和预期相反，因为你外层设置了TextDirection.rtl，可以调整Tween里的Offset正负值适配即可。

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