Flutter技術概覽

關於做者

E-moss，程序員，愛好閱讀和擼狗，主要從事iOS開發工做，公衆號：知本集。  
主要分享和編寫技術方面文章，不按期分享讀書筆記，亦可訪問「知本集」Git地址：https://github.com/knowtheroot/KnowTheRoot_iOS，歡迎提出問題和討論。
複製代碼

文章目錄

• Flutter框架架構
• Widget
• Flutter界面渲染簡述
• 總結

前言

目前hybrid開發模式：

1.經過WebView來進行原生和web交互

2.爲了解決WebView性能差的問題，以React Native爲表明的一類框架將最終渲染工做交還給了系統，雖然一樣使用類HTML+JS的UI構建邏輯，可是最終會生成對應的自定義原生控件，以充分利用原生控件相對於WebView的較高的繪製效率。

1、Flutter框架架構

Flutter的架構主要分紅三層:

• Framework
• Engine
• Embedder

1.Framework

Framework使用dart實現，包括:

• Material Design風格的Widget,Cupertino(針對iOS)風格的Widgets
• 文本/圖片/按鈕等基礎Widgets，渲染，動畫，手勢等，此部分的核心代碼是:flutter倉庫下的flutter package
• sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package

Widgets:能夠理解爲組件。

2.Engine

Engine使用C++實現，主要包括:

• Skia
• Dart
• Text

Skia是開源的二維圖形庫，提供了適用於多種軟硬件平臺的通用API。

3.Embedder

Embedder是一個嵌入層。
即把Flutter嵌入到各個平臺上去，這裏作的主要工做包括渲染Surface設置,線程設置，以及插件等。從這裏能夠看出，Flutter的平臺相關層很低，平臺(如iOS)只是提供一個畫布，剩餘的全部渲染相關的邏輯都在Flutter內部，這就使得它具備了很好的跨端一致性。

從架構圖能夠看出，從頭至尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發語言。
1.渲染引擎依靠跨平臺的Skia圖形庫來實現，依賴系統的只有圖形繪製相關的接口，能夠在最大程度上保證不一樣平臺、不一樣設備的體驗一致性;
2.邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高得多。

2、Widget

目前上主流的思想，都但願將各個ui控件解耦，慢慢演變出組件化的思想。

Flutter控件主要分爲兩大類:

• StatelessWidget
• StatefulWidget

StatelessWidget

顧名思義，StatelessWidget是狀態不可變的widget。初始狀態設置之後就不可再變化。若是須要變化須要從新建立。
當傳入數據改變時會從新渲染UI。
StatelessWidget用來展現靜態的文本或者圖片。

StatefulWidget

當傳入數據和本類數據改變時StatefulWidget都會從新渲染UI。
若是控件須要根據外部數據或者用戶操做來改變的話，就須要使用StatefulWidget。

什麼是State?

State的概念來源於Facebook的流行Web框架React，React風格的框架中使用控件樹和各自的狀態來構建界面，當某個控件的狀態發生變化時由框架負責對比先後狀態差別而且採起最小代價來更新渲染結果。

widget怎麼保存狀態的？

Flutter是經過引入了State來保存狀態。
當State的狀態改變時，能從新構建本節點以及孩子的Widget樹來進行UI變化。若是須要主動改變State的狀態，須要經過setState()方法進行觸發，單純改變數據是不會引起UI改變的。

3、Flutter界面渲染簡述

Flutter界面渲染過程分爲三個階段：

• 佈局
• 繪製
• 合成

佈局和繪製在**Flutter框架(Framework)中完成，合成則交由引擎(Engine)**負責。
詳細的渲染原理將在《Flutter技術原理詳解》講解。

4、總結

Flutter與ReactNative的對比

RN的渲染機制是基於前端框架的考慮,複雜的UI渲染是須要依賴多個view疊加。
例如渲染一個複雜的ListView,每個小的控件,都是一個native的view,而後相互組合疊加，當每次滾到刷新時，性能都是一個巨大的考驗。

ReactNative

• 採用Javascript開發，需學React，成本高
• 須要JavaScript橋接器，實現JS到Native轉化，性能耗損
• 訪問原生UI，頻繁操做易出性能問題
• 支持線上動態性，可有效避免頻繁更新版本

Flutter

• 採用Dart開發,可直接編譯成Native代碼（易學）
• 自帶UI組件和渲染器，僅依賴系統提供的Canvas（無橋接耗損）
• 暫不支持線上動態性，目前Android支持，iOS不支持