Widget
控件層,在flutter中,Container髓迎、Text等組件都屬于Widget,所以我們將這種樹稱為Widget樹建丧,也可以叫做控件樹排龄,他就表示我們在dart代碼中所寫的控件的結(jié)構(gòu)
Element
Widget的另一種抽象,也可以把它看作一個更為實(shí)際控件翎朱,因?yàn)樵谖覀兊氖謾C(jī)屏幕上顯示的控件并非我們代碼中所寫的Widget橄维,我們在代碼中所使用的像 Container、Text等這類組件和其屬性只不過是我們想要構(gòu)建的組件的配置信息拴曲,當(dāng)我們第一次調(diào)用 build()方法想要在屏幕上顯示這些組件時争舞,F(xiàn)lutter會根據(jù)這些信息生成該Widget控件對應(yīng)的Element,同樣地澈灼,Element 也會被放到相應(yīng)的Element樹中竞川,在Flutter中,一個Widget通過多次復(fù)用可以對應(yīng)多個Element實(shí)例蕉汪,Element才是我們真正在屏幕上顯示的元素流译。
Element 與 Widget 另一個區(qū)別在于,Widget天然是不可變的(immutable)者疤,他如要更新便需要重建福澡,如果想要把可變狀態(tài)與Widget聯(lián)系起來,可以使用StatefulWidget驹马,StatefulWidget通過使用StatefulWidget.createState 方法創(chuàng)建 State對象革砸,并將之?dāng)U充到Element以及合并到樹中;
Widget統(tǒng)治者Element除秀,Widget有點(diǎn)像class生成對象Element
Widget【將軍】 ->Element 【百夫長】->RenderObject【士兵】
RenderObject
在flutter中做組件布局渲染的工作,其為了組件間的渲染搭配及布局約束也有對應(yīng)的RenderObject樹算利,我們稱之為渲染樹册踩。
組件渲染過程簡述
我們知道控件樹中的每個控件都會實(shí)現(xiàn)一個RenderObject對象做渲染任務(wù),并將所有RenderObject組成渲染樹效拭。Flutter渲染組件的過程如下:
Full Pipeline
User Input -> Animation -> Build -> Layout -> Paint -> Composite -> Rasterize
Flutter的渲染過程由用戶的輸入開始暂吉,當(dāng)接受到用戶輸入的信號時,就會觸發(fā)動畫的進(jìn)度更新缎患,例如我們第一次渲染時的啟動動畫慕的,或者我們在滾動手機(jī)屏幕時單個列表項(xiàng)復(fù)用時的移動動畫。之后便需要開始視圖數(shù)據(jù)的構(gòu)建挤渔,(build)肮街,這一步中Flutter創(chuàng)建了前文描述的三顆視圖樹
在這之后,視圖才會進(jìn)行布局(layout)判导,計(jì)算各個部分的大小嫉父,然后進(jìn)行繪制(paint),生成每個視圖的視覺數(shù)據(jù)眼刃,這部分的任務(wù)主要就是由 RenderObject所做 绕辖。這里,flutter中的布局過程可用下圖表示鸟整,在上述構(gòu)建完成渲染樹后引镊,父渲染對象會將布局約束信息向下傳遞朦蕴,子渲染對象根據(jù)自己的渲染情況返回Size篮条,Size數(shù)據(jù)會向上傳遞,最終父渲染對象完成布局過程
[圖片上傳失敗...(image-69c615-1567218514793)]
最后一步進(jìn)行“光柵化”(Rasterize)吩抓,前一步得到合成的視圖數(shù)據(jù)其實(shí)還是一份矢量描述數(shù)據(jù)涉茧,光柵化幫助把這份數(shù)據(jù)真正的生成一個一個的像素填充數(shù)據(jù)。在flutter中疹娶,光柵化這個步驟被放在Engine層中伴栓。
在日常開發(fā)學(xué)習(xí)中,我們只需要在代碼層中配置好我們的Widget樹雨饺,了解各種Widget特性及使用方法钳垮,其余的工作都可以交給我們的框架層去實(shí)現(xiàn)。
渲染樹詳解
渲染樹上每個節(jié)點(diǎn)都是一個繼承自 RenderObject 類的對象额港,其由Element中的renderObject或