《Flutter 控件大全》第十六个：AnimatedSwitcher

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

AnimatedSwitcher在2个或者多个子组件之间切换时使用动画，基本用法如下：

var _currChild = Container(
    key: ValueKey("1"),
    height: 300,
    width: 300,
    color: Colors.red,
  );

AnimatedSwitcher(
      duration: Duration(seconds: 1),
      child: _currChild,
)

duration参数为动画执行时间。

点击按钮切换为另一个子组件：

RaisedButton(
  onPressed: () {
    setState(() {
      _currChild = Container(
                  key: ValueKey("2"),
                  height: 100,
                  width: 100,
                  color: Colors.blue,
                );
    });
  },
),

切换的子组件一定要有不同的key，子组件从红色切换到蓝色，默认情况下使用的动画是FadeTransiton，即渐隐渐显。效果如下：

我们也可以使用其他动画，比如缩放动画、旋转动画等，缩放动画用法如下：

AnimatedSwitcher(
  duration: Duration(seconds: 1),
  child: _currChild,
  transitionBuilder: (Widget child, Animation<double> value) {
    return ScaleTransition(
      child: child,
      scale: value,
    );
  },
)

缩放动画效果如下：