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、深刻了解繪製原理>>