一、目錄

跨平臺：跨平臺是什么，有哪些平臺要跨，為什么要跨平臺

說說當下我們已知的一些跨平臺方案，Flutter 對比這些方案有什么優劣

了解 Flutter 是什么

Flutter 特點

Flutter 核心思想

了解 Flutter 插件

目前的發展狀況和未來的發展前景如何，是否有可能替代當下，成為未來

成為 Flutter 工程師需要具備的素質

二、聊聊“跨平臺”

1、什么是跨平臺

跨平臺概念是軟件開發中一個重要的概念，不依賴于操作系統，也不依賴硬件環境。一個操作系統下開發的應用，放到另一個操作系統下依然可以運行。

這是百度百科對于“跨平臺”一詞的解釋，意思是判斷一個軟件是否可以跨平臺，主要的因素就是可以在不同操作系統和不同硬件下依然可以運行。

但這兒有一個疑問：如果在同一操作系統下，同樣的硬件環境下，如果可以跨 Native 與 Web 運行，這算不算是跨平臺呢 ？在我看來，這個四舍五入后也算是約等于跨平臺了，畢竟 Web 應用和 Native 應用算是差異較大的兩套運行環境。

2、有哪些平臺要跨

移動端：

• Android（谷歌）
• iOS（蘋果）
• Fuchsia OS（谷歌）
• Symbian OS（Nokia）
• Yun OS：（阿里）
• Harmony OS（華為）

PC 端：

• Windows（微軟）
• Mac OS（蘋果）
• Unix/Linux
• Ali OS（阿里）
• Chrome OS（谷歌）

其實還有很多比較小眾的操作系統就不一一列舉了，而這些操作系統中市場規模最大的要屬移動界的 Android、iOS 和 PC 界的 Windows、Mac OS，而跨平臺方案也主要是圍繞這幾位大神展開的。

3、為什么要跨平臺

在現有多平臺模式下，如果想要開發一個原生應用，并在多個平臺使用，每個平臺都需要獨立的代碼庫和獨立的開發團隊，基本無法實現代碼復用。

舉個例子：
微信在 Window、Mac OS、Android、iOS 上都分別用不同的語言開發了原生應用。
總成本 = 單平臺成本（項目、人力、物力、財力等） x 4

也正是因為這個原因，各大小公司為了減少工作量和節省成本，都希望有一套更加高效的方案解決多平臺成本問題。

三、目前市面的跨平臺方案

1、Web App

不用寫任何原生的代碼，只寫 Web 頁面，利用各個平臺都有瀏覽器的優勢，直接將應用運行在瀏覽器上。

優點：

• 多平臺共用代碼，節省工作量
• bug 即時修復
• 無需重復發版
• 無歷史問題

缺點：

• 性能不如原生
• 推廣性不如原生，需要打開瀏覽器通過鏈接跳轉，或搜索關鍵字，在用戶體驗上每多一步操作都可能損失大量用戶。

2、Hybrid App

以原生殼子內嵌 WebView 的方式，將主要的業務邏輯用 Web 頁面實現。

優點：

• 接近原生 App 體驗
• 多平臺共用代碼，節省工作量
• bug 即時修復
• 基本無需重復發版
• 基本無歷史問題

缺點：性能不如原生開發

3、小程序

依賴于擁有巨大流量的 App，將 Web 應用運行在宿主 App 上，無需下載安裝即可使用，例：微信、支付寶。

優點：

• 多平臺共用代碼，節省工作量
• 無需下載安裝
• bug 即時修復
• 無需重復發版
• 無歷史問題

缺點：

• 性能問題
• 技術支持依賴宿主提供，無法直接對接原生系統
• 如果用戶對宿主應用無使用需求，將難以進行推廣

4、React Native

React Native 是 2015 年 Facebook 推出的原生應用開發框架。它使用 JavaScript 和 React 編寫應用，利用相同的核心代碼就可以創建 Web、iOS 和 Android 平臺的原生應用。

優點：

• 原生體驗
• 跨平臺

缺點：

• 性能不能完全媲美原生
• 需要因為不同端的差異而在實現上進行妥協

5、Weex

Weex 是阿里推出的一套跨平臺方案，也是利用橋接轉化成原生組件，優缺點同 RN 類似，此處就不加贅述了。

四、Flutter 是什么？

Flutter 是谷歌推出的移動 UI 框架，第一次亮相于 2015 年 5 月 Dart 開發者峰會上，初始名字叫做 “Sky”，后更名為 Flutter。

Flutter 可以快速在 iOS 和 Android 上構建高質量的原生用戶界面。

五、Flutter 牛逼在哪？

1、跨平臺性

Flutter 可跨平臺有：

• PC端：
  • Windows
  • MacOS
  • Linux
• 移動端：
  • Android
  • iOS
  • Fuchsia
• Web 端
• 嵌入式

可以看到 Flutter 有著強大的跨平臺性，它可以跨以上所有平臺，到我寫博文時間當前最新 SDK 正式版為 1.9.1，目前主要還是對 Android 和 iOS 這兩個移動平臺進行支持，如果想嘗試在 Web 和 PC 運行，需要切換到開發版的 SDK。開發版 SDK 已集成的功能，距離上正式版間隔也不會太遠了（Flutter SDK 更新很快）。

以下是我測試分別跨 Android、iOS、Web 平臺的應用截圖：

2、良好的視覺和交互體驗

Flutter 內置了 Android 的 Material Design 和 iOS 的 Cupertino Design 風格組件，這些為開發出原生效果的 UI 提供了相當的便利，且它的滑動效果平滑而自然。

Material 設計風格彈窗：

Cupertino 設計風格彈窗：

3、快速開發

Flutter 的 Hot Reload （熱重載）技術可幫助開發人員快速構建 UI、添加功能、測試并更快地修復錯誤。
這個對于原生開發者簡直就是福音，我作為一名 Android 工程師親身經歷過改一行代碼后運行需要 2 分鐘的蹉跎歲月，哎，想想都是淚 ！ 雖然 Android Studio 之后添加了 Instant Run，但是項目較大的時候還是需要運行較長時間才能看到修改后的效果。

在 iOS 和 Android 模擬器或真機上可以在亞秒內重載，并且不會丟失狀態。
無需丟失狀態、亞秒內重載也是開發、調試非常有用的特性，曾幾何時，身為原生開發者的我們羨慕 Web 開發者利用 webpack-dev-server 無需手動刷新頁面和丟失狀態即可實時更新，如果用 Flutter 開發，擁有我們的 “webpack-dev-server” 不是夢。

4、原生性能

Flutter 包含了許多核心的 widget，如滾動、導航、圖標和字體等，這些都可以在 iOS 和 Android 上達到原生應用一樣的性能。

Flutter 采用 GPU 渲染技術，所以性能極高。Flutter 編寫的應用是可以達到 60 FPS，也就是說，它完全可以勝任游戲的制作。官方宣稱用 Flutter 開發的應用甚至超過原生應用的性能，這個我沒有實際測試驗證過，在網上也沒看到有人提供出測評參數，但既然谷歌敢攬這樣的瓷器活，應該是有他的金剛鉆的。

5、響應式框架

Flutter 擁有強大的響應式框架和組件，可以輕松構建用戶界面。

可能有的人剛看到“響應式框架”一詞時有點蒙逼，剛開始我也不太理解 Flutter 這兒說的響應式框架到底指什么。

通過以往的經驗來看，“響應式” 應該是指可以適配不同的設備，呈獻出相同的效果。 Web 開發在做屏幕大小適配的時候會遇到響應式開發，會不會是跟這個有關呢 ？

之后通過調研發現，Flutter 說到的響應式開發是此意非彼意，我們可以對比原生開發加以解釋：

Android 中要用 TextView 顯示一個文本，我們首先要拿到這個 TextView 對象，然后設置其 Text 屬性就會改變其顯示的內容。
而 Flutter 則不需要持有這個 TextView 對象，只需要更改這個數據的值就可以更改引用這個值的 View 上的屬性并實時呈獻相應的效果。

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);// 需要獲取到對象才能修改其屬性值textView.setText("Hello World");} }

Flutter 代碼：

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;@overrideWidget build(BuildContext context) {return RaisedButton(// 屬性值的變化會實時更新 UI child: Text('$_counter',),onPressed: () {setState(() {// 直接修改其屬性值 _counter ;});},);} }

通過以上兩段 Android 和 Flutter 的代碼對比可以看出，Android 代碼的呈獻修改是需要持有 View 對象的，而 Flutter 則不必，后者只需修改數據值即可。

由以上可以看出，這種響應式編程確實為我們省了不少事，在一定程度上節省了開發時間，提高了開發效率。

六、核心思想

1、一切皆組件

在 Flutter 中，按鈕、樣式（字體、顏色）、布局、動畫、手勢等都可稱為組件。
這個說法也是區別于我們以往的開發習慣的：如果做原生開發的話，很多樣式、手勢都是作為 View 的屬性去設置的，而在 Flutter 中卻是以組件的方式去呈獻的。

2、狀態

Flutter 的運行可以認為是一個巨大的狀態機，用戶的操作，請求 API 和系統事件都是推動狀態機運行的觸發點，觸發點通過 setState 方法推動狀態機進行響應。

示例：以下這段代碼是通過更新狀態來更新 UI 的一個實例

3、StatefulWidget & StatelessWidget

如果 Widget 需要根據用戶交互或其他因素進行更改，則該 Widget 是有狀態的，它需要繼承 StatefulWidget，例如：ProgressBar
反之為無狀態的，可以繼承自 StatelessWidget，例如：Text

有狀態組件：

無狀態組件：

七、了解插件

雖然 Flutter 提供了一些 UI 層面的支持，但卻無法直接調用原生系統的功能（比如調用藍牙、相機、Wifi 等）。
這個時候就需要用原生語言去做 Native 層開發。

例：創建一個調用系統相機的功能的流程：

創建插件項目

用 Android 原生語言 API 編寫調用 Android 系統相機功能

用 iOS 原生語言 API 編寫調用 iOS 系統相機功能

編寫 Flutter 調用原生接口方法

八、Flutter 對比目前市面上跨平臺方案

1、Flutter VS Web 系

Web 系的有：WebApp、Hybrid、小程序等，由于其大同小異，此處就做統一對比了。

優勢：

• 絕對的性能優勢：官方聲稱其性能甚至超過原生
• 以桌面第一入口方式進入，更利于推廣
• 具有不亞于 Web 應用的跨平臺性（跨幾乎所有平臺）

劣勢：

• 需要下載安裝
• 需升級發版
• 歷史問題

2、Flutter VS React Native

由于 RN 與 Weex 又類似，都是通過 bridge 連接 Native 的，這兒就只對比 RN 了。

優勢：

• 更優的性能：RN 需要用 JSBridge 去調用原生組件，而 Flutter 不用，它有自己的渲染引擎
• 跨平臺性：Flutter 對跨 PC 平臺也做了很好的支持，而且可以開發嵌入式，RN 官方沒有提供跨 PC 平臺的方案
• 無需因為不同端的差異而在實現上進行妥協

劣勢：

• 開發速度上略低于 RN，RN 的即用型組件可幫助開發人員快速制作應用程序
• 社區力量不如 RN

九、跨平臺技術的現在與未來

React Native：

目前應用最廣跨平臺方案，美國的市場份額占據 4.3%。
其實是想要拿到全球的使用數據，但是沒有查到，但也可說明跨平臺技術具有較大市場需求，可能還是因為存在一些弊端，沒有井噴式的上漲。

**Airbnb 宣布放棄使用 React Native，回歸使用原生技術。 **
這是一條代表性的消息，除了 Airbnb，國內也有放棄使用 RN 的，主要是由于隨著項目越來越大，RN 有一些局限性導致難以維護，后來聽說 RN 技術團隊在對其做重構優化。

Flutter：

谷歌在很多方面都對 Flutter 給予了很大的推廣和支持，谷歌新操作系統 Fuchsia 使用 Flutter 作為操作 UI 框架。
谷歌無論是在宣傳上還是技術上都做了很大的支持，Flutter 確實對比現有跨平臺技術也存在一定的優勢。

閑魚團隊由去年的混合開發使用 Flutter 到如今全應用 Flutter 開發。
閑魚是最早應用 Flutter 的開發團隊之一，由去年的混合 Flutter 應用到如今的全平臺 Flutter，也證明了 Flutter 的可行性。

拉勾網今年年初只有兩三個 Flutter 職位，到現在（2019.11.27）擁有約 40 專職 Flutter 職位招聘，如果再加上其它職位需附加 Flutter 屬性的，有 500 招聘職位。
短短一年時間，國內越來越多大、中、小型公司開始使用 Flutter 跨平臺技術，證明 Flutter 的確有其得天獨厚的優勢，還是很有發展前景滴！

技術文章規模由 2018 年年底寥寥數篇到如今可以快速搜索到各種技術資料。
我在今年的 Flutter App 開發過程中有著明顯的感受：年初技術資料極少，想要搜索 Flutter 相關資料，只有寥寥數條；現在各項細節技術資料相對全面，已明顯感覺到社區力量越來越壯大。

十、成為一名 Flutter 工程師需要具備的素質

Flutter 跨平臺技術如此強大，那我們有必要學習并準備成為一名 Flutter 工程師嗎 ？
其實作為一名技術人員，應該擁抱變化，并做好隨時學習了解新技術的準備，而如果想要成為一名優秀的 Flutter Developer 綜合來說應該掌握以下技能：

• Dart 語言基礎 Flutter 技術
• Android：Java 基礎 Android 技術 Kotlin 語言（官方推薦語言）
• iOS：OC 基礎 iOS 技術 Swift 語言（官方推薦語言）
• 深入：權限處理、兼容性適配、性能優化等

要開發 Flutter，首先 Dart 是必須要去學的，Flutter UI 框架也是需要非常熟悉的。
一些原生系統功能必須要用到原生語言去開發插件，這就要用到 Android 和 iOS 技術。
Java 和 Kotlin 語言你可以任選其一先去學習，目前市場大部分應用還是用 Java 去開發，但 Kotlin 已經是官方谷歌官方推薦語言，有一部分公司也已轉向 Kotlin，未來有必要學習了解。
OC 和 Swift 你也可以先任選其一去學習，但同 Kotlin 類似，Swfit 也是蘋果官方推薦語言，目前也有很多公司已經投入 Swift 開發。
有些時候可能需要涉及 Native 的權限、兼容性、性能等處理，也需要你去完善的自己的 Native 技術棧。

看到一些 Flutter 招聘職位中也有對于原生技術的要求：

前瞻：
現在 Flutter 的開發版已經可以用來開發 Web 和 PC 應用，未來可能也需要接觸 Web 和 PC 插件開發，感覺技術的發展趨勢越來越走向“大前端”，對開發人員的基本素質要求也越來越高，不禁想起很多程序員的一句感慨：“別再出新技術了，老子學不動了” ！

看到這么多要學的，可能有的人會想要望而卻步，但其實也不必如此悲觀，上面說的只是如果想要做到深入了解和全面開發的話盡量去做的點，其實也不是所有的場景都需要用到原生開發的，而且現在 Flutter 的三方插件庫也在不斷完善，一些常用的 Native 功能也可以直接在插件市場去找，直接添加項目依賴就可以使用了。

十一、總結

通過對現有跨平臺技術的了解，并與 Flutter 對比，感覺 Flutter 還是有很大優勢的，強大的跨平臺性和性能優勢讓其鶴立雞群！雖然 Flutter 1.0 推出到現在也不過一年的時間，但是其技術支持越來越完善，社區規模也在不斷壯大，感覺未來還是有很大的發展前景的。

如果想要全面且深入的做好 Flutter 開發，也需要具備比較廣而深的技術素質，總之，要做好 Flutter 開發，學的東西確實是挺不少的。

十二、參考文獻

• Flutter 中文網
• 《Flutter 技術入門與實戰》
• Building a web application with Flutter
• 手把手帶你使用Flutter開發web應用程序
• Flutter 1.9 新特性介紹
• Flutter 的進階之路之 Material Design 與 iOS 風格組件
• 如果你不熟悉Material Design，請一口吃下這篇干貨！
• Flutter 的響應式編程
• 六大 PC 操作系統用戶量排名
• 2019年，Flutter 和 React Native 誰主沉浮
• Can you use react native to create a desktop app
• 深入淺出weex核心原理
• 最火跨平臺React Native weex Flutter
• 流言終結者- Flutter和RN誰才是更好的跨端開發方案？

本文作者: ?

郝赟東 蜂群技術 | Android 軟件開發工程師

總結

以上是生活随笔為你收集整理的10 分钟了解 Flutter 跨平台方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。