移動開發新利器 | 一文深刻了解 Flutter 界面開發

Flutter框架簡介

跨平臺應用的框架，沒有使用WebView或者系統平臺自帶的控件，使用自身的高性能渲染引擎(Skia)自繪。
界面開發語言使用dart，底層渲染引擎使用C, C++。
組合大於繼承，控件自己一般由許多小型、單用途的控件組成，結合起來產生強大的效果，類的層次結構是扁平的，以最大化可能的組合數量。

Rendering Pipeline

本文主要介紹build、layout、paint的三個階段。

視圖樹

Widget&Element&RenderObject

Flutter視圖樹包含了三種樹，上圖只是介紹了三顆樹的基礎class的對應關係和功能介紹。

建立樹

建立widget樹

調用runApp(rootWidget)，將rootWidget傳給rootElement,作爲rootElement的子節點,生成Element樹，由Element樹生成Render樹

Widget：存放渲染內容、視圖佈局信息,widget的屬性最好都是immutable(如何更新數據呢？查看後續內容)
Element：存放上下文，經過Element遍歷視圖樹，Element同時持有Widget和RenderObject
RenderObject：根據Widget的佈局屬性進行layout，paint Widget傳人的內容

更新樹

爲何widget都是immutable？

Flutter界面開發是一種響應式編程，主張simple is fast，Flutter設計的初衷但願數據變動時發送通知到對應的可變動節點（多是一個StatefullWidget子節點,也能夠是rootWidget）,由上到下從新create widget樹進行刷新，這種思路比較簡單，不用關心數據變動會影響到哪些節點。

widget從新建立，element樹和renderObject樹是否也從新建立？

widget只是一個配置數據結構，建立是很是輕量的，加上Flutter團隊對widget的建立/銷燬作了優化，不用擔憂整個widget樹從新建立所帶來的性能問題，可是renderobject就不同了，renderobject涉及到layout、paint等複雜操做，是一個真正渲染的view，整個view 樹從新建立開銷就比較大，因此答案是否認的。