【动画 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 中已经举过例子了,不再赘述。

目录
相关文章
|
2天前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
2天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
1月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
76 8
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
122 5
|
1月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
103 2
|
1月前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
80 1
|
2月前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
2月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
75 0
|
2月前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表,示例代码展示了如何添加、删除列表项,并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例,演示了如何在Flutter中管理组件的状态。