Flutter技術簡介

1.Flutter簡介

​ 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架構圖架構

Flutter system ovewview

框架的上層比下層使用更頻繁。更詳細的查看API文檔併發

  • Flutter Framework:純Dart實現的SDK
    • 底下兩層:底層UI庫,提供動畫、繪製能力、手勢
    • Rendering層:構建UI樹,當UI樹有變化的時候,會計算出變化的部分,而後更新UI樹,將UI樹繪製到屏幕上
    • Widgets層:提供組件庫,提供了Material和Cupertino兩種視覺風格的組件庫
  • Engine層:使用C/C++實現的SDK,主要包括Skia、Dart和Text
    • Skia:開源的二維圖形庫,提供了適用於多種軟硬件平臺的通用API
    • Dart部分:Dart Runtime,Garbage Collection,若是是debug模式的話,包括JIT(just in time)支持,Release和profile模式下是AOT(ahead of time)編譯成了原生的arm代碼,不存在JIT部分。
    • Text:文本渲染,渲染層次以下:衍生自minikin的libtxt庫
  • Embedder層
    • Embedder是一個嵌入層,即把Flutter嵌入到各個平臺上去,這裏作的主要工做包括渲染Surface設置,線程設置,以及插件等。從這裏能夠看出,Flutter的平臺相關性很低,平臺只提供一個畫布,剩餘全部渲染相關的邏輯都在Flutter內部,這就使得它具備很好的跨端一致性。

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運行模式

  • 基於JIT的快速開發:Flutter在開發階段採用JIT模式,支持HOT Load,避免了每次改動都要進行編譯,節省開發時間。
  • 基於AOT的發佈包:在Flutter發佈時能夠經過AOT生成高效的ARM代碼以保證性能。執行效率比JavaScript高。同時,在debug包上測試的時候發現運行效率不夠,打一個release包會有意想不到的效果。

4.2 Flutter中一切皆widget

以前的文章裏也有強調過,widget是Flutter應用程序的構建塊。每一個widget都是用戶界面一部分的不可變聲明。與其餘將視圖、控制器、佈局和其餘屬性分離的框架不一樣,Flutter具備一致的統一對象模型:widget。

4.3Flutter編寫並行/併發應用程序

Flutter支持isolates。isolates是Flutter虛擬機中的獨立堆,他們能夠並行運行(一般做爲單獨的線程實現),isolates經過發送和接收異步消息進行通訊。

更多關注微信公衆號:Flutter入門

Flutter入門
相關文章
相關標籤/搜索