Flutter 场景切换动画实现

前言

在应用中，我们经常会遇到切换组件的场景，比如点击一个按钮后，将当前的图片为另一张图片；或者是翻转卡片，显示卡片详情。在 Flutter 中提供了 AnimatedSwitcher 这个动画组件来实现页面内的场景切换。

AnimatedSwitcher 介绍

AnimatedSwitcher 通过动效完成其子组件的切换，默认的效果是 FadeTransition。当其子组件发生改变的时候，就会按设定的转变效果进行转换。AnimatedSwitcher的构造方法如下：

const AnimatedSwitcher({
  Key? key,
  this.child,
  required this.duration,
  this.reverseDuration,
  this.switchInCurve = Curves.linear,
  this.switchOutCurve = Curves.linear,
  this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
  this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
})

与之前其他的动画组件不同，AnimatedSwitcher的参数除了 d