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的較高的繪製效率。

一、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不支持