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或
