乐趣区

关于ios:Flutter-详解七深入了解绘制原理

jiezi

## Widget

在 flutter 中，every is widget, 了解起来很容易，咱们所应用的显示文字的Text，展现图片的Image，展现地位信息的Padding, 都是Widget.

在浏览 Flutter 源码的，你可能会留神到 Widget 的定义：

@immutable
abstract class Widget extends DiagnosticableTree {
  ...
  const Widget({this.key});
  final Key key;
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
  return oldWidget.runtimeType == newWidget.runtimeType
      && oldWidget.key == newWidget.key;
}
  ...
}

官网这样讲：

A widget is an immutable description of part of a user interface.

小部件是对用户界面的不可变的形容。

咱们留神到左上角有 @immutable, 这个很重要，窗口小部件中的所有属性都必须为final, 一旦实例化，就无奈跟更改外部属性，然而事实上，咱们的UI 不可能变化无穷的，因而 Flutter 如何治理 UI 的状态呢？

Flutter有三棵树，Widget树、Element树、RenderObjects树，这些树分工不同，将他们组合在一起，来优化 UI 的各种可能性。

Element 是什么

记录一个 Widget 的地位信息

An instantiation of a [Widget] at a particular location in the tree.

它是树的可变局部，用于治理 UI 更新和更改，您能够将它看做是治理 widget 的生命周期的元素。每个元素都援用了一个widget, 很简略的。

RenderObject 是什么

在 Flutter 绘制 UI 时，它不会查看 Widget 的树，而是查看 RenderObjects, 它管制大小，布局并保留用于绘制理论widget 的所有逻辑，这就是渲染对象实例化很好性能的起因。

为了更好的展现这三棵树，咱们看上面小部件：

class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Hello world'),
    );
  }
}

当咱们启动利用时

1.Flutter 将遍历您的窗口小部件并创立窗口小部件树。

  1. 与小部件对应，Flutter创立元素树，在其中通过 createElement() 创立每一个 Element 对象。
  2. 当 Element 调用 createRenderObject() 时，将创立每个渲染对象。

如图所示：

当咱们要扭转小部件 Text 的值，咱们看下 Flutter Inspector 的信息。

更改前：

更改后：

在 text 中显示的值从 4 变为 5，它的renderObject 并未扭转。

因为在实例化渲染对象很消耗性能，flutter在这点做了保留，省掉了反复实例化的开销，如果他们具备雷同的类型，则无需从新创立渲染对象。咱们只须要更新 key 的值，能够做到从新创立渲染对象。

在理论开发中，一个页面预计至多几十个 widget，或者上百个widget，那么对应的element 和renderObject也是数量相等的，因而从新创立整个树是十分耗费性能的，flutter 最大水平减小性能节约，从而取得更佳的 UI 性能。

参考

  • How Flutter renders Widgets
  • How Flutter renders Widgets

文章汇总

<<Dart 异步与多线程 >>

<<Flutter 详解（一、深刻理解状态治理 –ScopeModel）>>

<<Flutter 详解(二、深刻理解状态治理 –Redux)>>

<<Flutter 详解（三、深刻理解状态治理 –Provider)>>

<<Flutter 详解（四、深刻理解状态治理 –BLoC)>>

<<Flutter 详解 (五、深刻理解 –Key)>>

<<Flutter 详解（六、深刻理解 –Stream>>

<<Flutter 详解（七、深刻理解绘制原理 >>

退出移动版