Flutter系列之Widget

1、Flutter的核心原則

Flutter包括一個現代的響應式框架、一個2D渲染引擎、現成的widget和開發工具

一切皆爲widget

那麼，什麼是widget呢？

Widget是Flutter功能的抽象描述，是視圖的配置信息，一樣也是數據的映射，是Flutter開發框架中最基本的概念。與其餘將視圖（View）、控制器（Controller）、活動（Activity）、應用（Application）、佈局（Layout）等屬性分離的框架不一樣，在Flutter中都是Widget

Widget能夠被定義爲：一個結構元素（如按鈕）；一個文本樣式元素（如字體或顏色等）等等

Widget渲染過程

如何結構化地組織視圖數據，提供給渲染引擎，最後完成界面顯示呢

一般狀況下，對於這一問題，不一樣的UI框架會以不一樣的方式處理，但無一例外地都會用到視圖樹（View Tree）的概念。而Flutter將視圖樹進行了擴展，把視圖數據的組織和渲染抽象爲三層：Widget、Element和RenderObject

這三部分的關係爲：

Widget<----Element---->RenderObject
複製代碼

Widget

Widget是Flutter中對視圖的一種結構化描述。Widget是控件實現的基本邏輯單位，裏面存儲的是有關視圖渲染的配置信息，包括佈局、渲染屬性、事件響應等信息

Flutter將Widget設計成不可變的，因此當視圖渲染的配置信息發生變化時，Flutter會選擇重建Widget樹的方式進行數據更新，以數據驅動UI構建的方式簡單高效

但由於涉及到大量的對象銷燬和重建，會對垃圾回收形成必定的壓力，而因爲Widget自己並不涉及實際的渲染，因此它只是一份輕量級的數據結構，重建的成本很低

Element

Element是Widget的一個實例化對象，它承載了試圖構建的上下文數據，是鏈接結構化的配置信息到完成最終渲染的橋樑

Flutter渲染過程：經過Widget樹生成對應的Element樹->建立相應的RenderObject並關聯到Element.renderObject屬性上->構建成RenderObject樹，完成最終渲染

注意：Element同時持有Widget和RenderObject，但Element和Widget都不負責最終的渲染，只是負責發送命令，最終的渲染則是由RenderObject負責完成

既然Element和Widget只是負責發送命令，那爲什麼不直接由Widget發送命令給RenderObject，從而省略Element呢

Element樹存在的意義：由於Widget具備不可變性，但Element是可變的，而Element樹將Widget樹的變化作了抽象，只將變化的部分同步到RenderObject樹中，從而最大程度的下降對真實渲染視圖的修改，進而提升渲染效率

RenderObject

RenderObject主要負責實現視圖渲染工做

Flutter經過控件樹（Widget樹）中的每一個控件（Widget）建立不一樣類型的渲染對象，組成渲染對象樹，而渲染對象樹在Flutter中的展現分爲四階段：佈局、繪製、合成及渲染。其中，佈局和繪製由RenderObject負責完成，Flutter採用深度優先機制遍歷渲染樹對象，肯定樹種每一個對象的位置和尺寸，並把他們繪製到不一樣的圖層上。繪製完畢後，合成及渲染則交給Skia完成

已同步更新至微信公衆號，歡迎關注「Android小白營」