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

框架的上層比下層使用更頻繁。更詳細的查看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通過發送和接收異步消息進行通信。

————————————————

版權聲明：本文為CSDN博主「damengzai」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/damengzai/java/article/details/90231081