Flutter 背景

谷歌移動應用程序開發(fā)跨平臺框架“Flutter”（google跨平臺開發(fā)框架）

谷歌給Flutter的定義：Flutter是面向iOS和Android應用，提供一套基礎代碼的高性能高可靠軟件開發(fā)工具包，使開發(fā)者能夠在iOS和Android兩個最主要的移動平臺上，打造統(tǒng)一代碼的高性能應用

概念

Flutter是谷歌的移動UI框架，可以在iOS和Android上構建高質量的原生用戶界面，可以將其理解為是一款移動應用程序SDK，包含框架、控件和一些工具；它使用的是 Google 自己開發(fā)的網(wǎng)絡編程語言——Dart 語言，因此，開發(fā)者只要使用過 Java 或 JavaScript 之類的語言，那么 Flutter 也極易上手

Flutter 目標

Flutter 是一個跨平臺（Android 和 iOS）的移動開發(fā)框架，使用的是 Dart)語言。和 React Native 不同的是，F(xiàn)lutter 框架并不是一個嚴格意義上的原生應用開發(fā)框架

Flutter 的目標是用來創(chuàng)建高性能、高穩(wěn)定性、高幀率、低延遲的 Android 和 iOS 應用，并且開發(fā)出來的應用在不同的平臺用起來跟原生應用具有一樣的體驗；不同的平臺的原生體驗應該得到保留，讓該應用看起來同整個系統(tǒng)更加協(xié)調；不同平臺的滾動操作、字體、圖標等特殊的特性應該和該平臺上的其他應用保持一致，讓用戶感覺就像操作原生應用一樣，比如，返回圖標 Android 和 iOS 是不一樣的；滾動內容滾動到底的反饋也是不一樣的

Flutter 特征

Flutter是一個移動應用程序的軟件開發(fā)工具包（SDK），具有以下特征：

● 跨平臺應用的框架，沒有使用WebView或者系統(tǒng)平臺自帶的控件，使用自身的高性能渲染引擎自繪

● 簡化版的瀏覽器，最大限度在android和ios上統(tǒng)一UI，包括業(yè)務邏輯和用戶體驗

● 開發(fā)語言使用dart，結合C, C , 和Skia（2D渲染引擎）構建

● 支持hot reload，包含著完整的控件和工具鏈

● 一切皆控件，控件是每個Flutter應用程序的基本構建塊，與分離視圖、控制器、布局和其他屬性的框架不同，F(xiàn)lutter具有一致的統(tǒng)一對象模型：控件；一個控件可以定義：結構元素（比如按鈕或菜單）、風格元素（比如字體或顏色方案）、布局的方面（比如填充）、一些業(yè)務邏輯等

● 組合大于繼承，控件本身通常由許多小型、單用途的控件組成，結合起來產(chǎn)生強大的效果，類的層次結構是扁平的，以最大化可能的組合數(shù)量

● 強化版的WebView，框架僅提供一個View層，大部分功能要依賴原生

● 目前只能夠運行大部分Dart代碼（不能引入dart:mirrors或dart:html庫）

Flutter體系架構

Flutter被設計成一個可擴展，分層的系統(tǒng)，它包含了一系列依賴其下層的獨立庫；其示意圖見下圖：

谷歌移動應用程序開發(fā)跨平臺框架“Flutter”（google跨平臺開發(fā)框架）

其中，framework層中的每一個組件均是可選的和可以代替的，從上圖可知，Flutter系統(tǒng)總共可以分為三層；上層的框架（Framework），中層的引擎（Engine），以及底層的嵌入層（Embedder）

● 框架（Framework）：框架層是純dart語言實現(xiàn)的一個響應式框架，開發(fā)者平常需要通過該層和Flutter系統(tǒng)交互

● 引擎（Engine）：引擎層絕大部分是用C 實現(xiàn)的，其為Flutter系統(tǒng)的核心。引擎提供了一系列Flutter核心API的底層實現(xiàn)，例如圖形（通過Skia），文字布局，文件等，是連接框架和系統(tǒng)（Andoird/iOS）的橋梁

● 嵌入層（Embedder）：嵌入層基本是由平臺對應的語言實現(xiàn)的，例如：在Android上是由Java和C 實現(xiàn)；在iOS是由Objective-C/Objective-C 實現(xiàn)，嵌入層為Flutter系統(tǒng)提供了一個入口，F(xiàn)lutter系統(tǒng)通過該入口訪問底層系統(tǒng)提供的服務，例如輸入法，繪制surface等

其中，F(xiàn)ramework是我們這一系列文章主要關注的部分，從下到上，其主要包括：

● 基礎模塊（foundational）及基礎服務，例如animation，painting，以及gestures，這三種基礎服務是為了方便上層調用對基礎模塊的抽象

● Rendering 層，為處理圖層提供了抽象組件；’通過這一層，你能構建一棵可繪制對象的樹；你可以動態(tài)操作這些對象，這棵樹可以根據(jù)你的修改自動更新這棵樹

● Widgets層，是組件的抽象，每個render對象都有對應的widget對象；除此之外，widgets層允許你定義你能重復使用的組合組件；同時，此層引入了響應式編程模型

● Material和Cupertino庫提供了一系列Material和iOS設計風格的組件

整體架構

Flutter可以理解為開發(fā)SDK或者工具包，其通過Dart作為開發(fā)語言，并且提供Material和Cupertino兩套視覺控件，視圖或其他和視圖相關的類，都以Widget的形式表現(xiàn)。Flutter有自己的渲染引擎，并不依賴原生平臺的渲染；Flutter還包含一個用C 實現(xiàn)的Engine，渲染也是包含在其中的

Flutter 的核心原則

Flutter 包含了一個函數(shù)響應式框架（ functional-reactive framework）、一個 2D 渲染引擎、直接可用的 Widget 庫、和各種開發(fā)工具；這些組件在一起配合使用，來幫助你設計、開發(fā)、測試和調試應用；這些功能都圍繞幾個核心的原則來實現(xiàn)的

跨平臺方案對比

Widget

谷歌移動應用程序開發(fā)跨平臺框架“Flutter”（google跨平臺開發(fā)框架）

在Flutter中將顯示以及和顯示相關的部分，都統(tǒng)一定義為widget，下面列舉一些widget包含的類型：

● 用于顯示的視圖，例如ListView、Text、Container等

● 用來操作視圖，例如Transform等動畫相關

● 視圖布局相關，例如Center、Expanded、Column等

在Flutter中，所有的視圖都是由Widget組成，Label、AppBar、ViewController等；在Flutter的設計中，組合的優(yōu)先級要大于繼承，整體視圖類結構繼承層級很淺但單層很多類；如果想定制或封裝一些控件，也應該以組合為主，而不是繼承

在iOS開發(fā)中，我也經(jīng)常采用這種設計方案，組合大于繼承。因為如果繼承層級過多的話，一個是不便于閱讀代碼，還有就是不好維護代碼。例如底層需要改一個通用的樣式，但這個類的繼承層級比較復雜，這樣改動的話影響范圍就比較大，會將一些不需要改的也改掉，這時候就會發(fā)現(xiàn)繼承很雞肋

但在iOS中有Category的概念，這也是一種組合的方式，可以通過將一些公共的東西放在Category中，使繼承的方便性和組合的靈活性達到一個平衡

Flutter中并沒有單獨的布局文件，例如iOS的XIB這種，代碼都在Widget中定義；和UIView的區(qū)別在于，Widget只是負責描述視圖，并不參與視圖的渲染；UIView也是負責描述視圖，而UIView的layer則負責渲染操作，這是二者的區(qū)別