【动画 widget】Flutter AnimatedBuilder

简介: 【动画 widget】Flutter AnimatedBuilder

image.png

Flutter AnimatedBuilder 继承自 AnimatedWidget,它的作用是生成一个有动画功能的 StatefulWidget widget 作为复杂 widget 的一部分。

源码分析

typedef TransitionBuilder = Widget Function(BuildContext context, Widget? child);
class AnimatedBuilder extends AnimatedWidget {
  const AnimatedBuilder({
    super.key,
    required Listenable animation,
    required this.builder,
    this.child,
  }) : assert(animation != null),
       assert(builder != null),
       super(listenable: animation);
  final TransitionBuilder builder;
  final Widget? child;
  @override
  Widget build(BuildContext context) {
    return builder(context, child);
  }
}
复制代码

源码非常简单。主要就一句代码 return builder(context, child); builder 通过参数传进来,让我们可以通过 builder 自定义 widget。

通过继承 AnimatedWidget 的方式自定义动画,我们不得不先自定义一个类出来。用 AnimatedBuilder 会更简洁。

使用 AnimatedBuilder

使用 AnimatedBuilder 很简单的,只需要给他一个 listenable 对象,一个 builder 函数。

还是拿上次 AnimatedWidget 的例子,不断放大的正方形,看看用 AnimatedBuilder 如何写。

image.png

class _MyAnimationState extends State<MyAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1))
          ..repeat();
    super.initState();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return  Center(
         child: AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                 return Container(
                   width: _controller.value * 100,
                   height: _controller.value * 100,
                   color: Colors.blue[200],
                 );
               },
    ))));
  }
}
复制代码

和直接用 AnimatedWidget 的实现方式相比,代码确实简洁很多。AnimatedBuilder 让动画 widget 以内嵌的方式嵌入到其它 widget 当中,省去了自定类。

但是 AnimatedBuilder 也是有他的不足的,如果要多次复用动画 Widget ,还是用直接继承 AnimatedWidget 的方式比较好。

性能优化

每当做动画效果的时候,都要认真考虑性能的问题,因为动画的刷新频率太高了,稍有不慎就会造成卡顿。builder 的参数 child 就是为优化准备的。

AnimatedBuilder(
      animation: _controller,
      child: Container(
        color: Colors.blue,
      ),
      builder: (context, child) {
        return SizedBox(
            width: _controller.value * 100,
            height: _controller.value * 100,
            child: child);
      },
    )
复制代码

我们可以把不参与动画的部分单拿出来。child 只会 build 一次。如果 child 放在builder 里面的话,每当 frame 刷新都会 build 一次。

还有一个办法是 用 const 关键字。这个前面在 AnimatedWidget 中已经举过例子了,不再赘述。

目录
相关文章
|
8天前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
19 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
1月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
24 0
|
1月前
Flutter-加载中动画
Flutter-加载中动画
16 0
|
1月前
Flutter-自定义表情雨下落动画
Flutter-自定义表情雨下落动画
15 0
|
1月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
70 0
|
1月前
Flutter-数字切换动画
Flutter-数字切换动画
11 0
|
1月前
|
开发者
Flutter 动画学习
Flutter 动画学习
|
2月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
22 0
|
3月前
|
数据库 Android开发
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
Android数据库框架-GreenDao入门,2024年最新flutter 页面跳转动画
|
3月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析