10 分钟了解 Flutter 跨平台方案
一、目錄
二、聊聊“跨平臺(tái)”
1、什么是跨平臺(tái)
跨平臺(tái)概念是軟件開(kāi)發(fā)中一個(gè)重要的概念，不依賴于操作系統(tǒng)，也不依賴硬件環(huán)境。一個(gè)操作系統(tǒng)下開(kāi)發(fā)的應(yīng)用，放到另一個(gè)操作系統(tǒng)下依然可以運(yùn)行。
這是百度百科對(duì)于“跨平臺(tái)”一詞的解釋，意思是判斷一個(gè)軟件是否可以跨平臺(tái)，主要的因素就是可以在不同操作系統(tǒng)和不同硬件下依然可以運(yùn)行。
但這兒有一個(gè)疑問(wèn)：如果在同一操作系統(tǒng)下，同樣的硬件環(huán)境下，如果可以跨 Native 與 Web 運(yùn)行，這算不算是跨平臺(tái)呢 ？在我看來(lái)，這個(gè)四舍五入后也算是約等于跨平臺(tái)了，畢竟 Web 應(yīng)用和 Native 應(yīng)用算是差異較大的兩套運(yùn)行環(huán)境。
2、有哪些平臺(tái)要跨
移動(dòng)端：
- Android（谷歌）
- iOS（蘋(píng)果）
- Fuchsia OS（谷歌）
- Symbian OS（Nokia）
- Yun OS：（阿里）
- Harmony OS（華為）
PC 端：
- Windows（微軟）
- Mac OS（蘋(píng)果）
- Unix/Linux
- Ali OS（阿里）
- Chrome OS（谷歌）
其實(shí)還有很多比較小眾的操作系統(tǒng)就不一一列舉了，而這些操作系統(tǒng)中市場(chǎng)規(guī)模最大的要屬移動(dòng)界的 Android、iOS 和 PC 界的 Windows、Mac OS，而跨平臺(tái)方案也主要是圍繞這幾位大神展開(kāi)的。
3、為什么要跨平臺(tái)
在現(xiàn)有多平臺(tái)模式下，如果想要開(kāi)發(fā)一個(gè)原生應(yīng)用，并在多個(gè)平臺(tái)使用，每個(gè)平臺(tái)都需要獨(dú)立的代碼庫(kù)和獨(dú)立的開(kāi)發(fā)團(tuán)隊(duì)，基本無(wú)法實(shí)現(xiàn)代碼復(fù)用。
舉個(gè)例子：
微信在 Window、Mac OS、Android、iOS 上都分別用不同的語(yǔ)言開(kāi)發(fā)了原生應(yīng)用。
總成本 = 單平臺(tái)成本（項(xiàng)目、人力、物力、財(cái)力等） x 4
也正是因?yàn)檫@個(gè)原因，各大小公司為了減少工作量和節(jié)省成本，都希望有一套更加高效的方案解決多平臺(tái)成本問(wèn)題。
三、目前市面的跨平臺(tái)方案
1、Web App
不用寫(xiě)任何原生的代碼，只寫(xiě) Web 頁(yè)面，利用各個(gè)平臺(tái)都有瀏覽器的優(yōu)勢(shì)，直接將應(yīng)用運(yùn)行在瀏覽器上。
優(yōu)點(diǎn)：
- 多平臺(tái)共用代碼，節(jié)省工作量
- bug 即時(shí)修復(fù)
- 無(wú)需重復(fù)發(fā)版
- 無(wú)歷史問(wèn)題
缺點(diǎn)：
- 性能不如原生
- 推廣性不如原生，需要打開(kāi)瀏覽器通過(guò)鏈接跳轉(zhuǎn)，或搜索關(guān)鍵字，在用戶體驗(yàn)上每多一步操作都可能損失大量用戶。
2、Hybrid App
以原生殼子內(nèi)嵌 WebView 的方式，將主要的業(yè)務(wù)邏輯用 Web 頁(yè)面實(shí)現(xiàn)。
優(yōu)點(diǎn)：
- 接近原生 App 體驗(yàn)
- 多平臺(tái)共用代碼，節(jié)省工作量
- bug 即時(shí)修復(fù)
- 基本無(wú)需重復(fù)發(fā)版
- 基本無(wú)歷史問(wèn)題
缺點(diǎn)：性能不如原生開(kāi)發(fā)
3、小程序
依賴于擁有巨大流量的 App，將 Web 應(yīng)用運(yùn)行在宿主 App 上，無(wú)需下載安裝即可使用，例：微信、支付寶。
優(yōu)點(diǎn)：
- 多平臺(tái)共用代碼，節(jié)省工作量
- 無(wú)需下載安裝
- bug 即時(shí)修復(fù)
- 無(wú)需重復(fù)發(fā)版
- 無(wú)歷史問(wèn)題
缺點(diǎn)：
- 性能問(wèn)題
- 技術(shù)支持依賴宿主提供，無(wú)法直接對(duì)接原生系統(tǒng)
- 如果用戶對(duì)宿主應(yīng)用無(wú)使用需求，將難以進(jìn)行推廣
4、React Native
React Native 是 2015 年 Facebook 推出的原生應(yīng)用開(kāi)發(fā)框架。它使用 JavaScript 和 React 編寫(xiě)應(yīng)用，利用相同的核心代碼就可以創(chuàng)建 Web、iOS 和 Android 平臺(tái)的原生應(yīng)用。
優(yōu)點(diǎn)：
- 原生體驗(yàn)
- 跨平臺(tái)
缺點(diǎn)：
- 性能不能完全媲美原生
- 需要因?yàn)椴煌说牟町惗趯?shí)現(xiàn)上進(jìn)行妥協(xié)
5、Weex
Weex 是阿里推出的一套跨平臺(tái)方案，也是利用橋接轉(zhuǎn)化成原生組件，優(yōu)缺點(diǎn)同 RN 類(lèi)似，此處就不加贅述了。
四、Flutter 是什么？
Flutter 是谷歌推出的移動(dòng) UI 框架，第一次亮相于 2015 年 5 月 Dart 開(kāi)發(fā)者峰會(huì)上，初始名字叫做 “Sky”，后更名為 Flutter。
Flutter 可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面。
五、Flutter 牛逼在哪？
1、跨平臺(tái)性
Flutter 可跨平臺(tái)有：
- PC端：
- Windows
- MacOS
- Linux
- 移動(dòng)端：
- Android
- iOS
- Fuchsia
- Web 端
- 嵌入式
可以看到 Flutter 有著強(qiáng)大的跨平臺(tái)性，它可以跨以上所有平臺(tái)，到我寫(xiě)博文時(shí)間當(dāng)前最新 SDK 正式版為 1.9.1，目前主要還是對(duì) Android 和 iOS 這兩個(gè)移動(dòng)平臺(tái)進(jìn)行支持，如果想嘗試在 Web 和 PC 運(yùn)行，需要切換到開(kāi)發(fā)版的 SDK。開(kāi)發(fā)版 SDK 已集成的功能，距離上正式版間隔也不會(huì)太遠(yuǎn)了（Flutter SDK 更新很快）。
以下是我測(cè)試分別跨 Android、iOS、Web 平臺(tái)的應(yīng)用截圖：
2、良好的視覺(jué)和交互體驗(yàn)
Flutter 內(nèi)置了 Android 的 Material Design 和 iOS 的 Cupertino Design 風(fēng)格組件，這些為開(kāi)發(fā)出原生效果的 UI 提供了相當(dāng)?shù)谋憷?#xff0c;且它的滑動(dòng)效果平滑而自然。
Material 設(shè)計(jì)風(fēng)格彈窗：
Cupertino 設(shè)計(jì)風(fēng)格彈窗：
3、快速開(kāi)發(fā)
Flutter 的 Hot Reload （熱重載）技術(shù)可幫助開(kāi)發(fā)人員快速構(gòu)建 UI、添加功能、測(cè)試并更快地修復(fù)錯(cuò)誤。
這個(gè)對(duì)于原生開(kāi)發(fā)者簡(jiǎn)直就是福音，我作為一名 Android 工程師親身經(jīng)歷過(guò)改一行代碼后運(yùn)行需要 2 分鐘的蹉跎歲月，哎，想想都是淚 ！ 雖然 Android Studio 之后添加了 Instant Run，但是項(xiàng)目較大的時(shí)候還是需要運(yùn)行較長(zhǎng)時(shí)間才能看到修改后的效果。
在 iOS 和 Android 模擬器或真機(jī)上可以在亞秒內(nèi)重載，并且不會(huì)丟失狀態(tài)。
無(wú)需丟失狀態(tài)、亞秒內(nèi)重載也是開(kāi)發(fā)、調(diào)試非常有用的特性，曾幾何時(shí)，身為原生開(kāi)發(fā)者的我們羨慕 Web 開(kāi)發(fā)者利用 webpack-dev-server 無(wú)需手動(dòng)刷新頁(yè)面和丟失狀態(tài)即可實(shí)時(shí)更新，如果用 Flutter 開(kāi)發(fā)，擁有我們的 “webpack-dev-server” 不是夢(mèng)。
4、原生性能
Flutter 包含了許多核心的 widget，如滾動(dòng)、導(dǎo)航、圖標(biāo)和字體等，這些都可以在 iOS 和 Android 上達(dá)到原生應(yīng)用一樣的性能。
Flutter 采用 GPU 渲染技術(shù)，所以性能極高。Flutter 編寫(xiě)的應(yīng)用是可以達(dá)到 60 FPS，也就是說(shuō)，它完全可以勝任游戲的制作。官方宣稱(chēng)用 Flutter 開(kāi)發(fā)的應(yīng)用甚至超過(guò)原生應(yīng)用的性能，這個(gè)我沒(méi)有實(shí)際測(cè)試驗(yàn)證過(guò)，在網(wǎng)上也沒(méi)看到有人提供出測(cè)評(píng)參數(shù)，但既然谷歌敢攬這樣的瓷器活，應(yīng)該是有他的金剛鉆的。
5、響應(yīng)式框架
Flutter 擁有強(qiáng)大的響應(yīng)式框架和組件，可以輕松構(gòu)建用戶界面。
可能有的人剛看到“響應(yīng)式框架”一詞時(shí)有點(diǎn)蒙逼，剛開(kāi)始我也不太理解 Flutter 這兒說(shuō)的響應(yīng)式框架到底指什么。
通過(guò)以往的經(jīng)驗(yàn)來(lái)看，“響應(yīng)式” 應(yīng)該是指可以適配不同的設(shè)備，呈獻(xiàn)出相同的效果。 Web 開(kāi)發(fā)在做屏幕大小適配的時(shí)候會(huì)遇到響應(yīng)式開(kāi)發(fā)，會(huì)不會(huì)是跟這個(gè)有關(guān)呢 ？
之后通過(guò)調(diào)研發(fā)現(xiàn)，Flutter 說(shuō)到的響應(yīng)式開(kāi)發(fā)是此意非彼意，我們可以對(duì)比原生開(kāi)發(fā)加以解釋：
Android 中要用 TextView 顯示一個(gè)文本，我們首先要拿到這個(gè) TextView 對(duì)象，然后設(shè)置其 Text 屬性就會(huì)改變其顯示的內(nèi)容。
而 Flutter 則不需要持有這個(gè) TextView 對(duì)象，只需要更改這個(gè)數(shù)據(jù)的值就可以更改引用這個(gè)值的 View 上的屬性并實(shí)時(shí)呈獻(xiàn)相應(yīng)的效果。
Talk is cheap，show me the code ！
Android 代碼：
public class MainActivity extends Activity {public void onCreate(Bundle savedInstanceState) {TextView textView = findViewByid(R.id.tv_main);// 需要獲取到對(duì)象才能修改其屬性值textView.setText("Hello World");} }Flutter 代碼：
class _MyHomePageState extends State<MyHomePage> {int _counter = 0;@overrideWidget build(BuildContext context) {return RaisedButton(// 屬性值的變化會(huì)實(shí)時(shí)更新 UI child: Text('$_counter',),onPressed: () {setState(() {// 直接修改其屬性值 _counter ;});},);} }通過(guò)以上兩段 Android 和 Flutter 的代碼對(duì)比可以看出，Android 代碼的呈獻(xiàn)修改是需要持有 View 對(duì)象的，而 Flutter 則不必，后者只需修改數(shù)據(jù)值即可。
由以上可以看出，這種響應(yīng)式編程確實(shí)為我們省了不少事，在一定程度上節(jié)省了開(kāi)發(fā)時(shí)間，提高了開(kāi)發(fā)效率。
六、核心思想
1、一切皆組件
在 Flutter 中，按鈕、樣式（字體、顏色）、布局、動(dòng)畫(huà)、手勢(shì)等都可稱(chēng)為組件。
這個(gè)說(shuō)法也是區(qū)別于我們以往的開(kāi)發(fā)習(xí)慣的：如果做原生開(kāi)發(fā)的話，很多樣式、手勢(shì)都是作為 View 的屬性去設(shè)置的，而在 Flutter 中卻是以組件的方式去呈獻(xiàn)的。
2、狀態(tài)
Flutter 的運(yùn)行可以認(rèn)為是一個(gè)巨大的狀態(tài)機(jī)，用戶的操作，請(qǐng)求 API 和系統(tǒng)事件都是推動(dòng)狀態(tài)機(jī)運(yùn)行的觸發(fā)點(diǎn)，觸發(fā)點(diǎn)通過(guò) setState 方法推動(dòng)狀態(tài)機(jī)進(jìn)行響應(yīng)。
示例：以下這段代碼是通過(guò)更新?tīng)顟B(tài)來(lái)更新 UI 的一個(gè)實(shí)例
3、StatefulWidget & StatelessWidget
如果 Widget 需要根據(jù)用戶交互或其他因素進(jìn)行更改，則該 Widget 是有狀態(tài)的，它需要繼承 StatefulWidget，例如：ProgressBar
反之為無(wú)狀態(tài)的，可以繼承自 StatelessWidget，例如：Text
有狀態(tài)組件：
無(wú)狀態(tài)組件：
七、了解插件
雖然 Flutter 提供了一些 UI 層面的支持，但卻無(wú)法直接調(diào)用原生系統(tǒng)的功能（比如調(diào)用藍(lán)牙、相機(jī)、Wifi 等）。
這個(gè)時(shí)候就需要用原生語(yǔ)言去做 Native 層開(kāi)發(fā)。
例：創(chuàng)建一個(gè)調(diào)用系統(tǒng)相機(jī)的功能的流程：
八、Flutter 對(duì)比目前市面上跨平臺(tái)方案
1、Flutter VS Web 系
Web 系的有：WebApp、Hybrid、小程序等，由于其大同小異，此處就做統(tǒng)一對(duì)比了。
優(yōu)勢(shì)：
- 絕對(duì)的性能優(yōu)勢(shì)：官方聲稱(chēng)其性能甚至超過(guò)原生
- 以桌面第一入口方式進(jìn)入，更利于推廣
- 具有不亞于 Web 應(yīng)用的跨平臺(tái)性（跨幾乎所有平臺(tái)）
劣勢(shì)：
- 需要下載安裝
- 需升級(jí)發(fā)版
- 歷史問(wèn)題
2、Flutter VS React Native
由于 RN 與 Weex 又類(lèi)似，都是通過(guò) bridge 連接 Native 的，這兒就只對(duì)比 RN 了。
優(yōu)勢(shì)：
- 更優(yōu)的性能：RN 需要用 JSBridge 去調(diào)用原生組件，而 Flutter 不用，它有自己的渲染引擎
- 跨平臺(tái)性：Flutter 對(duì)跨 PC 平臺(tái)也做了很好的支持，而且可以開(kāi)發(fā)嵌入式，RN 官方?jīng)]有提供跨 PC 平臺(tái)的方案
- 無(wú)需因?yàn)椴煌说牟町惗趯?shí)現(xiàn)上進(jìn)行妥協(xié)
劣勢(shì)：
- 開(kāi)發(fā)速度上略低于 RN，RN 的即用型組件可幫助開(kāi)發(fā)人員快速制作應(yīng)用程序
- 社區(qū)力量不如 RN
九、跨平臺(tái)技術(shù)的現(xiàn)在與未來(lái)
React Native：
目前應(yīng)用最廣跨平臺(tái)方案，美國(guó)的市場(chǎng)份額占據(jù) 4.3%。
其實(shí)是想要拿到全球的使用數(shù)據(jù)，但是沒(méi)有查到，但也可說(shuō)明跨平臺(tái)技術(shù)具有較大市場(chǎng)需求，可能還是因?yàn)榇嬖谝恍┍锥?#xff0c;沒(méi)有井噴式的上漲。
**Airbnb 宣布放棄使用 React Native，回歸使用原生技術(shù)。 **
這是一條代表性的消息，除了 Airbnb，國(guó)內(nèi)也有放棄使用 RN 的，主要是由于隨著項(xiàng)目越來(lái)越大，RN 有一些局限性導(dǎo)致難以維護(hù)，后來(lái)聽(tīng)說(shuō) RN 技術(shù)團(tuán)隊(duì)在對(duì)其做重構(gòu)優(yōu)化。
Flutter：
谷歌在很多方面都對(duì) Flutter 給予了很大的推廣和支持，谷歌新操作系統(tǒng) Fuchsia 使用 Flutter 作為操作 UI 框架。
谷歌無(wú)論是在宣傳上還是技術(shù)上都做了很大的支持，Flutter 確實(shí)對(duì)比現(xiàn)有跨平臺(tái)技術(shù)也存在一定的優(yōu)勢(shì)。
閑魚(yú)團(tuán)隊(duì)由去年的混合開(kāi)發(fā)使用 Flutter 到如今全應(yīng)用 Flutter 開(kāi)發(fā)。
閑魚(yú)是最早應(yīng)用 Flutter 的開(kāi)發(fā)團(tuán)隊(duì)之一，由去年的混合 Flutter 應(yīng)用到如今的全平臺(tái) Flutter，也證明了 Flutter 的可行性。
拉勾網(wǎng)今年年初只有兩三個(gè) Flutter 職位，到現(xiàn)在（2019.11.27）擁有約 40 專(zhuān)職 Flutter 職位招聘，如果再加上其它職位需附加 Flutter 屬性的，有 500 招聘職位。
短短一年時(shí)間，國(guó)內(nèi)越來(lái)越多大、中、小型公司開(kāi)始使用 Flutter 跨平臺(tái)技術(shù)，證明 Flutter 的確有其得天獨(dú)厚的優(yōu)勢(shì)，還是很有發(fā)展前景滴！
技術(shù)文章規(guī)模由 2018 年年底寥寥數(shù)篇到如今可以快速搜索到各種技術(shù)資料。
我在今年的 Flutter App 開(kāi)發(fā)過(guò)程中有著明顯的感受：年初技術(shù)資料極少，想要搜索 Flutter 相關(guān)資料，只有寥寥數(shù)條；現(xiàn)在各項(xiàng)細(xì)節(jié)技術(shù)資料相對(duì)全面，已明顯感覺(jué)到社區(qū)力量越來(lái)越壯大。
十、成為一名 Flutter 工程師需要具備的素質(zhì)
Flutter 跨平臺(tái)技術(shù)如此強(qiáng)大，那我們有必要學(xué)習(xí)并準(zhǔn)備成為一名 Flutter 工程師嗎 ？
其實(shí)作為一名技術(shù)人員，應(yīng)該擁抱變化，并做好隨時(shí)學(xué)習(xí)了解新技術(shù)的準(zhǔn)備，而如果想要成為一名優(yōu)秀的 Flutter Developer 綜合來(lái)說(shuō)應(yīng)該掌握以下技能：
- Dart 語(yǔ)言基礎(chǔ) Flutter 技術(shù)
- Android：Java 基礎(chǔ) Android 技術(shù) Kotlin 語(yǔ)言（官方推薦語(yǔ)言）
- iOS：OC 基礎(chǔ) iOS 技術(shù) Swift 語(yǔ)言（官方推薦語(yǔ)言）
- 深入：權(quán)限處理、兼容性適配、性能優(yōu)化等
要開(kāi)發(fā) Flutter，首先 Dart 是必須要去學(xué)的，Flutter UI 框架也是需要非常熟悉的。
一些原生系統(tǒng)功能必須要用到原生語(yǔ)言去開(kāi)發(fā)插件，這就要用到 Android 和 iOS 技術(shù)。
Java 和 Kotlin 語(yǔ)言你可以任選其一先去學(xué)習(xí)，目前市場(chǎng)大部分應(yīng)用還是用 Java 去開(kāi)發(fā)，但 Kotlin 已經(jīng)是官方谷歌官方推薦語(yǔ)言，有一部分公司也已轉(zhuǎn)向 Kotlin，未來(lái)有必要學(xué)習(xí)了解。
OC 和 Swift 你也可以先任選其一去學(xué)習(xí)，但同 Kotlin 類(lèi)似，Swfit 也是蘋(píng)果官方推薦語(yǔ)言，目前也有很多公司已經(jīng)投入 Swift 開(kāi)發(fā)。
有些時(shí)候可能需要涉及 Native 的權(quán)限、兼容性、性能等處理，也需要你去完善的自己的 Native 技術(shù)棧。
看到一些 Flutter 招聘職位中也有對(duì)于原生技術(shù)的要求：
前瞻：
現(xiàn)在 Flutter 的開(kāi)發(fā)版已經(jīng)可以用來(lái)開(kāi)發(fā) Web 和 PC 應(yīng)用，未來(lái)可能也需要接觸 Web 和 PC 插件開(kāi)發(fā)，感覺(jué)技術(shù)的發(fā)展趨勢(shì)越來(lái)越走向“大前端”，對(duì)開(kāi)發(fā)人員的基本素質(zhì)要求也越來(lái)越高，不禁想起很多程序員的一句感慨：“別再出新技術(shù)了，老子學(xué)不動(dòng)了” ！
看到這么多要學(xué)的，可能有的人會(huì)想要望而卻步，但其實(shí)也不必如此悲觀，上面說(shuō)的只是如果想要做到深入了解和全面開(kāi)發(fā)的話盡量去做的點(diǎn)，其實(shí)也不是所有的場(chǎng)景都需要用到原生開(kāi)發(fā)的，而且現(xiàn)在 Flutter 的三方插件庫(kù)也在不斷完善，一些常用的 Native 功能也可以直接在插件市場(chǎng)去找，直接添加項(xiàng)目依賴就可以使用了。
十一、總結(jié)
通過(guò)對(duì)現(xiàn)有跨平臺(tái)技術(shù)的了解，并與 Flutter 對(duì)比，感覺(jué) Flutter 還是有很大優(yōu)勢(shì)的，強(qiáng)大的跨平臺(tái)性和性能優(yōu)勢(shì)讓其鶴立雞群！雖然 Flutter 1.0 推出到現(xiàn)在也不過(guò)一年的時(shí)間，但是其技術(shù)支持越來(lái)越完善，社區(qū)規(guī)模也在不斷壯大，感覺(jué)未來(lái)還是有很大的發(fā)展前景的。
如果想要全面且深入的做好 Flutter 開(kāi)發(fā)，也需要具備比較廣而深的技術(shù)素質(zhì)，總之，要做好 Flutter 開(kāi)發(fā)，學(xué)的東西確實(shí)是挺不少的。
十二、參考文獻(xiàn)
- Flutter 中文網(wǎng)
- 《Flutter 技術(shù)入門(mén)與實(shí)戰(zhàn)》
- Building a web application with Flutter
- 手把手帶你使用Flutter開(kāi)發(fā)web應(yīng)用程序
- Flutter 1.9 新特性介紹
- Flutter 的進(jìn)階之路之 Material Design 與 iOS 風(fēng)格組件
- 如果你不熟悉Material Design，請(qǐng)一口吃下這篇干貨！
- Flutter 的響應(yīng)式編程
- 六大 PC 操作系統(tǒng)用戶量排名
- 2019年，Flutter 和 React Native 誰(shuí)主沉浮
- Can you use react native to create a desktop app
- 深入淺出weex核心原理
- 最火跨平臺(tái)React Native weex Flutter
- 流言終結(jié)者- Flutter和RN誰(shuí)才是更好的跨端開(kāi)發(fā)方案？
本文作者: ?
郝赟東 蜂群技術(shù) | Android 軟件開(kāi)發(fā)工程師
總結(jié)
以上是生活随笔為你收集整理的10 分钟了解 Flutter 跨平台方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 维特比算法 python_维特比算法理解
- 下一篇： gawk编程