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