Flutter 详解（7、深刻了解绘制原理）

## 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 详解（1、深刻了解状态管理--ScopeModel）>>

<<Flutter 详解(2、深刻了解状态管理--Redux)>>

<<Flutter 详解（3、深刻了解状态管理--Provider)>>

<<Flutter 详解（4、深刻了解状态管理--BLoC)>>

<<Flutter 详解 (5、深刻了解--Key)>>

<<Flutter 详解 （6、深刻了解--Stream>>

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