Flutter是Google開發的一套全新的跨平臺、開源UI框架,支持iOS、Android系統開發,而且是將來新操做系統Fuchsia的默認開發套件。2017年5月發佈第一個版本,而且在2018年12月初發布1.0穩定版,2019年MWC上發佈1.2版本。算法
在Flutter以前已經有好多跨平臺UI解決方案,基於WebView的Cordova,基於JavaScript渲染成原生控件的React Native。而Flutter徹底顛覆了以往的依賴,使用Skia做爲2D渲染引擎,自建UI。微信
技術類型 | UI渲染方式 | 性能 | 開發效率 | 動態化 | 框架表明 |
---|---|---|---|---|---|
H5+原生 | WebView渲染 | 通常 | 高 | 支持 | Cordova |
JavaScript+原生 | 原生控件渲染 | 好 | 高 | 支持 | RN |
自繪UI+原生 | 調用系統API渲染 | 好 | FLutter高,QT低 | 默認不支持 | Flutter,QT |
2. Flutter架構圖架構
框架的上層比下層使用更頻繁。更詳細的查看API文檔併發
3. Flutter渲染機制框架
3.1Flutter佈局渲染的整理流程異步
Flutter界面的渲染過程分爲三個階段:佈局、繪製、合成,佈局和繪製在Flutter框架中完成,合成則交由引擎負責。函數
由於直接交付給GPU多圖層視圖數據是低效的,可能會重複繪製,因此還須要進行一步圖層合成,最後才交由引擎負責光柵化視圖,因此添加了合成圖層。工具
用戶操做->更新動畫->構建控件->佈局->繪製圖層->合成圖層->光柵化佈局
3.2虛擬DOM技術性能
Widget——>Element——>RenderObject
Widget樹就是咱們的UI組件樹,但這個只是一種描述信息,渲染引擎不認識,RenderObject樹纔是渲染引擎真的認識的,咱們須要將Widget轉化爲能用來渲染視圖的RenderObject。
虛擬DOM解決了一個重要的矛盾:就是DOM操做的性能損耗與頻繁進行局部DOM操做的矛盾。
沒有用虛擬DOM以前,DOM會在每次元素更新來到之時渲染一次DOM
用了虛擬DOM後,虛擬DOM會先彙總各個元素的更新狀況,經過diff算法計算出與原來DOM樹的差別,最後經過一次DOM更新解決。
3.3構建widget
您能夠經過實現widget的build返回widget樹(或層次結構)來定義widget的獨特特性。這棵樹更具體地表示了用戶界面的widget層次。例如,工具欄widget的build函數可能返回一個包含一些文本和各類按鈕的水平佈局。而後,框架遞歸地構建widget,直到將全部的widget構建完成,而後framework將他們一塊兒添加到樹中。
widget的構建函數通常沒有反作用。每當它被要求構建時,widget應該返回一個新的widget樹,不管widget之前返回的是什麼。framework回將以前的構建與當前的構建比較並肯定須要對用戶界面進行哪些修改。
這種自動化比較很是有效,能夠實現高性能的交互式應用程序。而構建函數的設計則着重於聲明widget是由什麼構成的,而不是將用戶界面從一個狀態更新到另外一個狀態,從而簡化了代碼。
4. 其餘
4.1支持JIT和AOT運行模式
4.2 Flutter中一切皆widget
以前的文章裏也有強調過,widget是Flutter應用程序的構建塊。每一個widget都是用戶界面一部分的不可變聲明。與其餘將視圖、控制器、佈局和其餘屬性分離的框架不一樣,Flutter具備一致的統一對象模型:widget。
4.3Flutter編寫並行/併發應用程序
Flutter支持isolates。isolates是Flutter虛擬機中的獨立堆,他們能夠並行運行(一般做爲單獨的線程實現),isolates經過發送和接收異步消息進行通訊。
更多關注微信公衆號:Flutter入門