注：本文同步釋出於微信公眾號：stringwu的網際網路雜談 Flutter的一些概念(二)
1 flutter的核心渲染模組
當應用啟動時flutter 會遍歷所有的Widget 形成Widget 樹，並透過createElement 方法建立每個element 物件，最後透過createRenderObject 方法建立renderobject 物件
1.1 Widget
Widget 樹作來描述UI結構，很輕量，
1.2 Element
Element同時持有Widget和RenderObject
會存放一些上下文資訊，，支撐UI 結構
1.3 RenderObject
Render 控制實際的佈局和繪製，儲存元素的大小和佈局等資訊，例項化一個RenderObject 是非常耗時的。
2 Layer 和SceneBuilder的區別與聯絡
在Flutter中，SceneBuilder和Layer都是渲染流程中的關鍵概念,是緊密相關的，它們一起工作來構建應用程式的UI。當使用者操作應用程式時，SceneBuilder會根據使用者輸入來更新Scene，並生成新的Layer。然後，Flutter將這些Layer傳遞給GPU或CPU進行渲染，從而生成最終的UI
Layer 和 SceneBuilder 都是渲染流程中的關鍵概念，它們是構建和渲染 UI 的一部分；
2.1 Layer
Layer 樹是渲染樹的一部分，但它與 Widget 樹不同，因為 Layer 樹是專門用於渲染的。 Layer 是一個抽象類，代表了螢幕上的一塊區域。在 Flutter 的渲染流程中，Widget 首先被轉換成 Element，然後 Element 被轉換成 RenderObject，最終 RenderObject 被轉換成 Layer。
Flutter 中有幾種不同型別的 Layer，包括但不限於：
- ContainerLayer：一個簡單的層，沒有任何視覺內容，但可以包含其他層。
- PictureLayer：包含 Skia 圖形引擎的 Picture 物件，用於繪製圖形。
- OpacityLayer：可以設定子層的透明度。
- TransformLayer：可以對子層進行變換操作，如旋轉、縮放、平移等。
- ClipRectLayer、ClipRRectLayer 和 ClipPathLayer：用於裁剪子層，只顯示特定形狀內的區域。
2.2 SceneBuilder
SceneBuilder 是一個在構建階段用來構建 Scene 物件的工具類。Scene 物件代表了整個 Flutter應用的渲染樹，包括所有的Layer。SceneBuilder 提供了一系列方法來新增、修改和刪除Layer，構建最終的渲染輸出。SceneBuilder 的使用通常涉及以下步驟：
- 建立
SceneBuilder例項：開始構建過程。 - 新增
Layer：使用addRect、addPicture、addTexture等方法新增不同型別的 Layer。 - 構建
Scene：透過呼叫 build 方法完成 Scene 的構建。 - 提交渲染：將構建好的 Scene 提交給渲染引擎進行渲染。
首先由 UI 執行緒構建 Widget 樹，然後透過 Renderer 將 Widget 樹轉換成 RenderObject 樹，接著 RenderObject 樹被轉換成 Layer 樹。最後，使用 SceneBuilder 構建 Scene，並提交給渲染引擎進行渲染。
3 幾個關鍵字之間的聯絡
mixin implements extends這三個關鍵字在Dart中可同時存在，其中
mixin 混入，多個類層次結構中複用類程式碼的方法，使用mixin的條件
- mixins類只能繼承自object
- mixins 不能有建構函式
- implements 實現介面
- extends 繼承
4 widget的分類
- 繪製類：
RenderObjectWidget,相關的方法呼叫順序為：layout -> performResize -> performLayout -> markNeedsPaint - 代理類，
inheritedWidget和ParentDataWidget,一般用 於狀態的共享 - 組合類：
StatelesWidget和StatefulWidget
5 參考
Flutter面試題
公眾號二維碼，有興趣的小夥伴可以關注一下
