欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第六个:AnimatedBuilder

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

AnimatedBuilder可以让我们轻松的构建动画控件,下面的案例是让flutter logo图片旋转,代码如下:

class _TestState extends State<Test> with TickerProviderStateMixin {
AnimationController animationController;

@override
void initState() {
  animationController =
      AnimationController(duration: Duration(seconds: 2), vsync: this)
        ..addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            animationController.reverse();
          } else if (status == AnimationStatus.dismissed) {
            animationController.forward();
          }
        });
  animation = Tween(begin: 0.0, end: 2.0 * pi).animate(animationController);
  //开始动画
  animationController.forward();
)

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: animation,
    builder: (BuildContext context, Widget child) {
      return Transform.rotate(
        angle: animation.value,
        child: child,
      );
    },
    child: FlutterLogo(size: 60,),
  );
}
@override
  dispose() {
    super.dispose();
    animationController.dispose();
  }
}

效果如下:

《Flutter 控件大全》第六个:AnimatedBuilder

builder方法是animation的值发生变化会调用builder函数,构建新的组件。

animation参数表示动画。

child参数将会传递给builder方法,如果builder返回一个不依赖于animation的组件,那么这个子控件不会每次都重建,child参数可以不设置,但官方建议设置,它在某些情况下可以优化其体验。