Flutter 背景

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

概念

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

Flutter 目標(biāo)

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

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

Flutter 特征

Flutter是一個(gè)移動(dòng)應(yīng)用程序的軟件開(kāi)發(fā)工具包（SDK），具有以下特征：

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

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

● 開(kāi)發(fā)語(yǔ)言使用dart，結(jié)合C, C , 和Skia（2D渲染引擎）構(gòu)建

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

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

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

● 強(qiáng)化版的WebView，框架僅提供一個(gè)View層，大部分功能要依賴(lài)原生

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

Flutter體系架構(gòu)

Flutter被設(shè)計(jì)成一個(gè)可擴(kuò)展，分層的系統(tǒng)，它包含了一系列依賴(lài)其下層的獨(dú)立庫(kù)；其示意圖見(jiàn)下圖：

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

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

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

● 嵌入層（Embedder）：嵌入層基本是由平臺(tái)對(duì)應(yīng)的語(yǔ)言實(shí)現(xiàn)的，例如：在A(yíng)ndroid上是由Java和C 實(shí)現(xiàn)；在iOS是由Objective-C/Objective-C 實(shí)現(xiàn)，嵌入層為Flutter系統(tǒng)提供了一個(gè)入口，F(xiàn)lutter系統(tǒng)通過(guò)該入口訪(fǎng)問(wèn)底層系統(tǒng)提供的服務(wù)，例如輸入法，繪制surface等

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

● 基礎(chǔ)模塊（foundational）及基礎(chǔ)服務(wù)，例如animation，painting，以及gestures，這三種基礎(chǔ)服務(wù)是為了方便上層調(diào)用對(duì)基礎(chǔ)模塊的抽象

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

● Widgets層，是組件的抽象，每個(gè)render對(duì)象都有對(duì)應(yīng)的widget對(duì)象；除此之外，widgets層允許你定義你能重復(fù)使用的組合組件；同時(shí)，此層引入了響應(yīng)式編程模型

● Material和Cupertino庫(kù)提供了一系列Material和iOS設(shè)計(jì)風(fēng)格的組件

整體架構(gòu)

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

Flutter 的核心原則

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

跨平臺(tái)方案對(duì)比

Widget

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

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

● 用來(lái)操作視圖，例如Transform等動(dòng)畫(huà)相關(guān)

● 視圖布局相關(guān)，例如Center、Expanded、Column等

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

在iOS開(kāi)發(fā)中，我也經(jīng)常采用這種設(shè)計(jì)方案，組合大于繼承。因?yàn)槿绻^承層級(jí)過(guò)多的話(huà)，一個(gè)是不便于閱讀代碼，還有就是不好維護(hù)代碼。例如底層需要改一個(gè)通用的樣式，但這個(gè)類(lèi)的繼承層級(jí)比較復(fù)雜，這樣改動(dòng)的話(huà)影響范圍就比較大，會(huì)將一些不需要改的也改掉，這時(shí)候就會(huì)發(fā)現(xiàn)繼承很雞肋

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

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

結(jié)語(yǔ)

技術(shù)是無(wú)止境的，你需要對(duì)自己提交的每一行代碼、使用的每一個(gè)工具負(fù)責(zé)，不斷挖掘其底層原理，才能使自己的技術(shù)升華到更高的層面

Android 架構(gòu)師之路還很漫長(zhǎng)，與君共勉

PS:有問(wèn)題歡迎指正,可以在評(píng)論區(qū)留下你的建議和感受；

歡迎大家點(diǎn)贊評(píng)論，覺(jué)得內(nèi)容可以的話(huà)，可以轉(zhuǎn)發(fā)分享一下