1. 前言

Flutter是Google打造的高性能、跨平臺的UI框架。它能夠給開發者提供簡單、高效的方式來構建和部署跨平臺、高性能移動應用；給用戶提供漂亮、無平臺區分的app體驗。 Flutter是如何作到這一點的呢？它的框架結構是怎麼樣的呢？接下來，我將寫一系列的文章分析Flutter的框架層，結合源碼分析Flutter框架所採用的各類黑科技。本文是這個系列文章的第一篇，主要介紹Flutter框架的總覽。編程

2. Flutter體系架構

Flutter被設計成一個可擴展，分層的系統。它包含了一系列依賴其下層的獨立庫。其示意圖見下圖.markdown

其中，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是咱們這一系列文章主要關注的部分。從下到上，其主要包括：app

基礎模塊（foundational）及基礎服務，例如animation，painting，以及gestures，這三種基礎服務是爲了方便上層調用對基礎模塊的抽象。
Rendering 層，爲處理圖層提供了抽象組件。經過這一層，你能構建一棵可繪製對象的樹。你能夠動態操做這些對象，這棵樹能夠根據你的修改自動更新這棵樹。
Widgets層，是組件的抽象。每一個render對象都有對應的widget對象。除此以外，widgets層容許你定義你能重複使用的組合組件。同時，此層引入了響應式編程模型。
Material和Cupertino庫提供了一系列Material和iOS設計風格的組件。

3. 不一樣跨平臺技術對比

市面上有不少對比不一樣跨平臺技術的文章，例如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庫，其繪製性能甚至可能超過原生。佈局

4. 小結

本文主要介紹了Flutter框架體系，其中重點介紹了Flutter的Framework層結構。以後對比了Flutter和其餘跨平臺技術，並經過它們繪製原理的對比分析，解釋了Flutter性能能夠媲美原生應用的緣由。post

Flutter框架分析（一）--架構總覽

1. 前言

2. Flutter體系架構

3. 不一樣跨平臺技術對比

4. 小結

5. 相關文章