來源：SegmentFault 思否社區
作者：王大Flutter 知識體系
Flutter 渲染過程
Flutter 的展示過程分為四個階段：布局、繪製、合成和渲染。
### 布局
Flutter 採用深度優先機制遍歷渲染對象樹，決定渲染對象樹中各渲染對象在螢幕上的位置和尺寸。在布局過程中，渲染對象樹中的每個渲染對象都會接收父對象的布局約束參數，決定自己的大小，然後父對象按照控制項邏輯決定各個子對象的位置，完成布局過程。
為了防止因子節點發生變化而導致整個控制項樹重新布局，Flutter 加入了一個機制——布局邊界（Relayout Boundary），可以在某些節點自動或手動地設置布局邊界，當邊界內的任何對象發生重新布局時，不會影響邊界外的對象，反之亦然。
繪製
布局完成後，渲染對象樹中的每個節點都有了明確的尺寸和位置。Flutter 會把所有的渲染對象繪製到不同的圖層上。與布局過程一樣，繪製過程也是深度優先遍歷，而且總是先繪製自身，再繪製子節點。
以下圖為例：節點 1 在繪製完自身後，會再繪製節點 2，然後繪製它的子節點 3、4 和 5，最後繪製節點 6。
可以看到，由於一些其他原因（比如，視圖手動合併）導致 2 的子節點 5 與它的兄弟節點 6 處於了同一層，這樣會導致當節點 2 需要重繪的時候，與其無關的節點 6 也會被重繪，帶來性能損耗。
為了解決這一問題，Flutter 提出了與布局邊界對應的機制——重繪邊界（Repaint Boundary）。在重繪邊界內，Flutter 會強制切換新的圖層，這樣就可以避免邊界內外的互相影響，避免無關內容置於同一圖層引起不必要的重繪。
重繪邊界的一個典型場景是 Scrollview。ScrollView 滾動的時候需要刷新視圖內容，從而觸發內容重繪。而當滾動內容重繪時，一般情況下其他內容是不需要重繪的，這時候重繪邊界就派上用場了。~~~~
合成和渲染
終端設備的頁面越來越複雜，因此 Flutter 的渲染樹層級通常很多，直接交付給渲染引擎進行多圖層渲染，可能會出現大量渲染內容的重複繪製，所以還需要先進行一次圖層合成，即將所有的圖層根據大小、層級、透明度等規則計算出最終的顯示效果，將相同的圖層歸類合併，簡化渲染樹，提高渲染效率。
合併完成後，Flutter 會將幾何圖層數據交由 Skia 引擎加工成二維圖像數據，最終交由 GPU 進行渲染，完成介面的展示。