當前位置:成語大全網 - 新華字典 - 三、Flutter的渲染機制之RenderObjectWidget、RenderObjectElement、RenderObject

三、Flutter的渲染機制之RenderObjectWidget、RenderObjectElement、RenderObject

RenderObjectWidget 是 Widget 例如 SizeBox , Column 等

RenderObjectElement 是這類 Widget 生成的 Element 類型,

例如 SizeBox 對應 SingleChildRenderObjectElement (單子節點的 Element )

RenderObject 才是真正負責繪制的對象,其中包含了 paint , layout 等方法~

Text 組件為例:

class Text extends StatelessWidget

Text build返回的是

class RichText extends MultiChildRenderObjectWidget

MultiChildRenderObjectWidget - > MultiChildRenderObjectElement

RenderObjectElement 會重寫 mount

遍歷 _parent (就是上個節點的 element ,這個 _parent 在每次的 mount 方法設置),壹直遍歷知道找到最近的壹個 RenderObjectElement

在回顧下 inflateWidget

SingleChildRenderObjectElement

MultiChildRenderObjectElement

inflateWidget 會觸發 RenderObjectWidget 的 createElement 創建 RenderObjectElement ,

再調用 RenderObjectElement 的 mount 方法

mount 方法調用 RenderObjectWidget 的 createRenderObject 方法創建 RenderObject

然後找到最近的壹個父 RenderObjectElement 調用 insertRenderObjectChild 插入 RenderObject

(註意:這裏不是 RenderObjectElement 的 child ,而是 RenderObjectElement 關聯的 RenderObject 的 child , element 樹裏面都是 element , RenderObject 樹裏面都是 RenderObject )

MultiChildRenderObjectElement 多子節點掛載邏輯

多節點添加子節點邏輯

每個子節點的 parentData 的 after 用來指向前壹個子節點 previous 指向下壹個子節點