Flutter笔记54：AnimatedSwitcher切换时的动画组件

AnimatedSwitcher设置文字或形状发生变化时的动画效果，这里以数字加加为效果，当然如Container的宽高变化都可以用这种方法来实现过渡效果：

class _DemoPageState extends State<DemoPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        //带动画的Switcher
        AnimatedSwitcher(
          //动画时长
          duration: Duration(milliseconds: 500),
          //指定过渡动画
          transitionBuilder: (Widget child, Animation<double> animation) {
            return ScaleTransition(
              child: child,
              scale: animation,
            );
          },
          //动画显示内容
          child: Text(
            '$_count',
            //每次变化的key值
            key: ValueKey<int>(_count),
            style: TextStyle(fontSize: 56.0),
          ),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _count += 1;
            });
          },
          child: Text('点击+1'),
        )
      ],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！