mui刷新不显示动画_Flutter AnimatedSwitcher 动画切换

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

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;       });     },   ); }

当然本篇构建的是一个缩放动画，也可以结合使用其他动画来实现更巧的效果。​