2、Widget、Element、RenderObject

1、Flutter 之圖像繪製原理

3、Flutter UI 更新流程

4、build 流程分析

5、layout 流程分析

6、Paint 繪製（1）

7、Paint 繪製（2）

8、composite 流程分析

9、Flutter 小實踐

一、基本介紹

第一章提到，在 Flutter 的 Engine 層向 Dart 層的暴露了 Canvas, PictureRecorder 等接口，利用這些接口能夠繪製本身想要的圖像。經過直接調用 API 繪製圖像，這種更像指令式操做。在 Flutter 中，能夠以聲明式組件構建本身的UI, 經過構建一個個的 Widget 組件，來聲明界面應該有哪些功能，長什麼樣, 像 ReactNative 的虛擬 DOM 同樣，這些 widget 並非最終顯示在 界面的組件。一個 Widget 構建 到最終顯示在顯示器上圖像主要經歷了三個階段： Widget --> Element --> RenderObject

@override Widget build(BuildContext context) { return Row( children: [ Text('文本1'), Row( children: [ Image.asset('/assets/images/test.png'), Text('文本2') ], ) ], ); } 在上面這個例子中，Widget 樹有四個 widgets，兩個 Row widget 及其子 widget。

在上示例子中，當要更新第二個Text的文本顏色時，銷燬整個舊 WidgetTree，生成一棵新 WidgetTree，而ElementTree 與 RenderObjecrTree 只替換變動的節點。

二、三顆樹職責

（1）Widget

UI 視圖的配置信息，在 Flutter中，並非經過指令的方式直接操做UI， 而是經過數據驅動驅動視圖改變~ widget 描述了前配置和狀態描述了它們的視圖, 是不可變的,當某個widget的狀態發生更改時，widget會從新構建所描述的視圖。

widget 生成對應的渲染對象 renderObject 主要是經過 createRenderObject 方法，可是 並不是全部的widget都能調用 createRenderObject 建立對應的 renderObject, 只有 RenderObjectWidget 類的widget 才擁有 createRenderObject 方法，那其餘 StatelessWidget, StatefulWidget 這些，它們的 renderObject 是怎麼來的呢？這個後面再分析

（2）RenderObject RenderObject的主要職責是，計算節點的大小，位置，進行相關繪製和佈局操做，即最終真正的渲染對象

(3) Element widget 和 renderObject 的中間調度者

三、爲何須要三顆樹？

widget 是比較輕量的，只是涉及相關UI 的配置信息，銷燬重建成本比較低，可是 renderObject 涉及到 佈局，繪製等複雜的操做，同時還包含對應的layer，是一個真正渲染的view，整個view 樹從新建立開銷就比較大