题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

​​【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过​​

​​【x2】各种系列的视频教程 免费开源 关注 你不会迷路​​

​​【x3】系列文章 百万 Demo 随时 复制粘贴 使用​​

​AnimatedSwitcher组件用来执行动画组件的切换功能，如 A 的缩小 B 的放大，通过AnimatedSwitcher组件可以很巧妙的结合在一起。

本文最终执行效果如下图所示：

Flutter AnimatedSwitcher 动画切换组件的基本使用_Flutter教程

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<double> animation) {
       //执行缩放动画
       return ScaleTransition(child: child, scale: animation);
     },
     ///执行动画的子 Widget
     ///只有子 Widget 被切换时才会触发动画
     child: Text(
       '$_count',
       //显示指定key，不同的key会被认为是不同的Text
       key: ValueKey<int>(_count),
       style: TextStyle(fontSize: 22),
     ),
   );
 }

当 这里使用到的 _count 变量值更新并刷新页面时，可触发动画效果，如点击一个按钮，修改 _count 的值 如下代码：

///构建一个有边框的按钮 
 OutlineButton buildOutlineButton() {
   return OutlineButton(
     child: const Text(
       '数据递增',
     ),
     onPressed: () {
       print(("count $_count"));
       setState(() {
         _count += 1;
       });
     },
   );
 }

完毕

当然微信公众号如果你有兴趣可以关注一下，每日分享不在话下。

Flutter AnimatedSwitcher 动画切换组件的基本使用_Flutter学习_02