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'), ) ], ); } }
Flutter笔记54:AnimatedSwitcher切换时的动画组件
AnimatedSwitcher设置文字或形状发生变化时的动画效果,这里以数字加加为效果,当然如Container的宽高变化都可以用这种方法来实现过渡效果: