在 Flutter应用开发 中,AnimatedSwitcher 组件用来执行动画组件的切换功能,如 A 的缩小 B 的放大,通过AnimatedSwitcher组件可以很巧妙的结合在一起。
![2d5212671b17b81d993b92d292a353ce.gif](https://i-blog.csdnimg.cn/blog_migrate/b8b769268581a2aad95a7841b8922d73.gif)
1 AnimatedSwitcher 构造函数属性说明
const AnimatedSwitcher({ Key key, this.child, @required this.duration, // 新child显示动画时长 this.reverseDuration,// 旧child隐藏的动画时长 this.switchInCurve = Curves.linear, // 新child显示的动画曲线 this.switchOutCurve = Curves.linear,// 旧child隐藏的动画曲线 this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, // 动画构建器 this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器})
2 AnimatedSwitcher 核心使用方法
///AnimatedSwitcher 的基本使用AnimatedSwitcher buildAnimatedSwitcher(BuildContext context) { return AnimatedSwitcher( ///动画执行切换时间 duration: const Duration(milliseconds: 600), ///动画构建器 构建指定动画类型 transitionBuilder: (Widget child, Animation animation) { //执行缩放动画 return ScaleTransition(child: child, scale: animation); }, ///执行动画的子 Widget ///只有子 Widget 被切换时才会触发动画 child: Text( '$_count', //显示指定key,不同的key会被认为是不同的Text key: ValueKey(_count), style: TextStyle(fontSize: 22), ), );}
当 这里使用到的 _count 变量值更新并刷新页面时,可触发动画效果,如点击一个按钮,修改 _count 的值 如下代码:
///构建一个有边框的按钮 OutlineButton buildOutlineButton() { return OutlineButton( child: const Text( '数据递增', ), onPressed: () { print(("count $_count")); setState(() { _count += 1; }); }, ); }
当然本篇构建的是一个缩放动画,也可以结合使用其他动画来实现更巧的效果。
![e0304e882c050da9974be8bfe4125848.png](https://i-blog.csdnimg.cn/blog_migrate/e9b9d4cd97b328731ec54e92d14cd183.jpeg)