前言
Flutter是Google打造的高效能、跨平臺的UI框架。它可以給開發者提供簡單、高效的方式來構建和部署跨平臺、高效能移動應用；給使用者提供漂亮、無平臺區分的app體驗。 Flutter是如何做到這一點的呢？它的框架結構是怎麼樣的呢？接下來，我將寫一系列的文章分析Flutter的框架層，結合原始碼分析Flutter框架所採用的各種黑科技。本文是這個系列文章的第一篇，主要介紹Flutter框架的總覽。
Flutter體系架構
Flutter被設計成一個可擴充套件，分層的系統。它包含了一系列依賴其下層的獨立庫。其示意圖見下圖.
其中，framework層中的每一個元件均是可選的和可以代替的。從上圖可知，Flutter系統總共可以分為三層。上層的框架（Framework），中層的引擎（Engine），以及底層的嵌入層（Embedder）。
- 框架（Framework）：框架層是純dart語言實現的一個響應式框架，開發者平常需要通過該層和Flutter系統互動。
- 引擎（Engine）：引擎層絕大部分是用C++實現的，其為Flutter系統的核心。引擎提供了一系列Flutter核心API的底層實現，例如圖形（通過Skia），文字佈局，檔案等，是連線框架和系統（Andoird/iOS）的橋樑。
- 嵌入層（Embedder）：嵌入層基本是由平臺對應的語言實現的，例如：在Android上是由Java和C++實現；在iOS是由Objective-C/Objective-C++實現。嵌入層為Flutter系統提供了一個入口，Flutter系統通過該入口訪問底層系統提供的服務，例如輸入法，繪製surface等。
其中，Framework是我們這一系列文章主要關注的部分。從下到上，其主要包括：
- 基礎模組（foundational）及基礎服務，例如animation，painting，以及gestures，這三種基礎服務是為了方便上層呼叫對基礎模組的抽象。
- Rendering 層，為處理圖層提供了抽象元件。通過這一層，你能構建一棵可繪製物件的樹。你可以動態操作這些物件，這棵樹可以根據你的修改自動更新這棵樹。
- Widgets層，是元件的抽象。每個render物件都有對應的widget物件。除此之外，widgets層允許你定義你能重複使用的組合元件。同時，此層引入了響應式程式設計模型。
- Material和Cupertino庫提供了一系列Material和iOS設計風格的元件。
不同跨平臺技術對比
市面上有很多對比不同跨平臺技術的文章，例如Flutter實戰中的移動開發技術簡介。本文以表格形式簡單介紹一下不同跨平臺技術的特點和優劣勢等，然後說明一下flutter效能能媲美原生應用的原因。 目前市面上主要有H5+原生，JavaScript+原生渲染，自繪UI+原生。三種跨平臺技術，其對比結果如下。
| 技術型別 | UI渲染方式 | 效能 | 開發效率 | 動態化 | 框架代表 |
|---|---|---|---|---|---|
| H5+原生 | WebView渲染 | 一般 | 高 | 支援 | Cordova、Ionic |
| JavaScript+原生渲染 | 原生控制元件渲染 | 好 | 高 | 支援 | RN、Weex |
| 自繪UI+原生 | 自帶引擎渲染 | 非常好 | Flutter高, QT低 | 預設不支援 | QT、Flutter |
由圖可見，Flutter最大的優勢，是其出色的效能。根據Google官方的宣傳，其效能是可以媲美原生的。這一點我們可以通過以下結構示意圖看出來。
原生應用是由其框架直接通過Skia呼叫GPU進行繪製，但是RN等JavaScript+原生渲染跨平臺技術是需要由其框架先呼叫原生框架，再通過原生框架呼叫Skia，最後呼叫至GPU進行繪製的。因此，其呼叫步驟上相對於原生多了一層，理論上其繪製效能將比原生差。
但是Flutter則不同，由於其應用也是由Flutter框架直接通過Skia呼叫GPU進行繪製，因此只要其框架的效能能媲美原生框架的效能，則其繪製效能就可以媲美原生。不僅如此，由於Skia是Flutter自帶的，其升級非常方便，而Android系統相對而言升級比較緩慢，因此如果Flutter使用了更高效能的Skia庫，其繪製效能甚至可能超過原生。
小結
本文主要介紹了Flutter框架體系，其中重點介紹了Flutter的Framework層結構。之後對比了Flutter和其他跨平臺技術，並通過它們繪製原理的對比分析，解釋了Flutter效能可以媲美原生應用的原因。