首页 > 建站教程 > APP开发,混合APP >  Flutter笔记54:AnimatedSwitcher切换时的动画组件正文

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