这篇文章主要介绍“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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的参数除了 duration 之外，其他的有所不同，具体如下：
reverseDuration：反向时长，也就是切换为旧组件的时长，不设置的话就和duration一致。switchInCurve：切入动画曲线，也就是新组件切换进入的曲线；switchOutCurve：切出动画曲线，也就是旧组件切换出去时的曲线；transitionBuilder：切换转变动画构建，是一个函数，定义如下，可以用这个方法来构建自己的切换动效。
typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);layoutBuilder：可以设置新组件在组件树中的布局，也是一个函数：
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);默认布局为 defaultLayoutBuilder，也就是将当前组件放置在最顶层：
static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) { return Stack( children: <Widget>[ ...previousChildren, if (currentChild != null) currentChild, ], alignment: Alignment.center, );}关于AnimatedSwitcher有一个地方需要特别注意，那就是如果切换的两个组件相同的话，AnimatedSwitcher会以为组件没有改变，而不会进行动效切换。文档说明如下：
The child is considered to be "new" if it has a different type or [Key]
实际上是根据 Widget 的 canUpdate 判断的：
static int _debugConcreteSubtype(Widget widget) { return widget is StatefulWidget ? 1 : widget is StatelessWidget ? 2 : 0;}因此，如果两个组件类型相同，需要使用不同的 Key 来区分，通常是使用 ValueKey。
应用
下面我们来实现开篇的动效，这个使用的是 SizeTransition 尺寸变化转变动效完成两张图片的切换，这样会让组件的尺寸从小变到大，有一种掀开面纱的感觉。代码如下：
class AnimatedSwitcherDemo extends StatefulWidget { AnimatedSwitcherDemo({Key? key}) : super(key: key); @override _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();}class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> { Widget? _animatedWidget; bool test = false; @override void initState() { super.initState(); _animatedWidget = ClipOval( child: Image.asset('images/beauty.jpeg'), key: ValueKey(1), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AnimatedSwticher'), brightness: Brightness.dark, backgroundColor: Colors.black, ), backgroundColor: Colors.black, body: Center( child: Container( padding: EdgeInsets.all(10.0), child: AnimatedSwitcher( child: _animatedWidget, duration: const Duration(milliseconds: 1000), transitionBuilder: (child, animation) { return SizeTransition( sizeFactor: animation, child: child, ); }, ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.play_arrow), onPressed: () { setState(() { test = !test; _animatedWidget = test ? ClipOval( child: Image.asset('images/beauty2.jpeg'), key: ValueKey(2), ) : ClipOval( child: Image.asset('images/beauty.jpeg'), key: ValueKey(1), ); }); }, ), ); }}关于“Flutter中怎么使用AnimatedSwitcher实现场景切换动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
