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的宽高变化都可以用这种方法来实现过渡效果:
