關於作者
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的較高的繪製效率。
一、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高得多。
二、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改變的。
三、Flutter介面渲染簡述
Flutter介面渲染過程分為三個階段：
- 佈局
- 繪製
- 合成
佈局和繪製在**Flutter框架(Framework)中完成，合成則交由引擎(Engine)**負責。
詳細的渲染原理將在《Flutter技術原理詳解》講解。
四、總結
Flutter與ReactNative的對比
RN的渲染機制是基於前端框架的考慮,複雜的UI渲染是需要依賴多個view疊加。
例如渲染一個複雜的ListView,每一個小的控制元件,都是一個native的view,然後相互組合疊加，當每次滾到重新整理時，效能都是一個巨大的考驗。
ReactNative
- 採用Javascript開發，需學React，成本高
- 需要JavaScript橋接器，實現JS到Native轉化，效能耗損
- 訪問原生UI，頻繁操作易出效能問題
- 支援線上動態性，可有效避免頻繁更新版本
Flutter
- 採用Dart開發,可直接編譯成Native程式碼（易學）
- 自帶UI元件和渲染器，僅依賴系統提供的Canvas（無橋接耗損）
- 暫不支援線上動態性，目前Android支援，iOS不支援