AnimatedSwitcher中的子元素
由:CircularProgressIndicator()
改变为:Image.network('https://cdn.uviewui.com/uview/swiper/1.jpg')
则会触发动画

class _MyHomePageState extends State<MyHomePage> {bool flag = true;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Center(child: Container(alignment: Alignment.center,width: 400,height: 200,color: Colors.yellowAccent,child: AnimatedSwitcher(duration: const Duration(milliseconds: 500),child: flag ? const CircularProgressIndicator() : Image.network('https://cdn.uviewui.com/uview/swiper/1.jpg'),),),),floatingActionButton: FloatingActionButton(onPressed: (){flag = !flag;setState(() {});},child: const Icon(Icons.add),),);}
}

AnimatedSwitcher中通过添加transitionBuilder修改动画效果

// 添加1个缩放动画
child: AnimatedSwitcher(
transitionBuilder:((child, animation){ // 改变动画效果return ScaleTransition( // 缩放scale: animation,child: child,);}),duration: const Duration(milliseconds: 500),child: flag ? const CircularProgressIndicator() : Image.network('https://cdn.uviewui.com/uview/swiper/1.jpg'),
),// 动画也可以叠加使用，在添加一个淡入淡出
child: AnimatedSwitcher(transitionBuilder:((child, animation){ // 改变动画效果return ScaleTransition( // 缩放scale: animation,child: FadeTransition(opacity: animation,child: child,), // 淡入淡出);}),duration: const Duration(milliseconds: 500),child: flag ? const CircularProgressIndicator() : Image.network('https://cdn.uviewui.com/uview/swiper/1.jpg'),
),

AnimatedSwitcher里如果是改变同样的组件，如何触发动画

// 相同组件，只是内容更换，需要加key: UniqueKey()唯一的
child: Text(flag ? "你好Flutter" : "改变内容",key: UniqueKey()
),