1.2 Flutter技術

前面小節中介紹了業界比較流行的跨端框架，以及跨端技術的實現難點。Flutter一經推出，由于它在技術上的突破性，迅速在跨端領域脫穎而出，并在短時間內成為技術熱點。本節將對Flutter技術進行整體介紹。

1.2.1 Flutter技術簡介

Flutter是由Google公司研發的一種跨端開發技術，其最初目的是用于Google內部正在研發的一款新操作系統Fuchsia，Flutter是作為這個新系統的UI框架。2017年在Google I/O大會上，Flutter框架作為一種能夠開發Android、iOS應用的跨端框架正式對外公布。2018年Flutter1.0正式推出，標志其功能走向穩定。

Flutter在跨端技術的多個難點問題上都有突破，它的優勢具體可以梳理為以下幾個方面。

1 像素級別的雙端一致性

Flutter自帶Skia圖形繪制引擎，采用自繪制方式，不論在Android還是iOS上，Flutter應用的渲染都不是系統原生，都統一用Flutter的Skia引擎進行繪制。因此兩端渲染過程是完全一致的，能夠實現像素級別雙端一致性。

雙端一致性是跨端框架中的難點問題，在Flutter中通過自繪制的方式得到完美解決，不僅UI實現了一致展示，動畫、動效等都能達到像素級別的雙端一致性。

2 接近原生的執行效率

跨端框架的運行效率通常低于原生，而Flutter針對這一難題實現了突破，達到了接近原生的執行效率，遠遠超出同類框架。

首先在編程語言上，Flutter采用Dart語言，這是一種非常先進的編程語言，支持多種編譯方式，既能夠以JIT方式編譯，也能夠以AOT方式編譯。其中JIT用于開發階段，像JavaScript一樣動態執行，雖然運行效率低，但可以熱重載（Hot Reload）。Release模式使用AOT，它能將Dart代碼編譯為平臺原生代碼，運行時無須再通過解釋器解釋，因此執行效率遠高于JavaS-cript，接近原生。

第二點在繪制引擎上，Flutter采用集成Skia引擎自渲染，實現了從執行到渲染的閉環，沒有跨層帶來的性能損耗。所謂跨層，以React Native框架為例，在React Native中進行UI渲染，需要通過JS Bridge將繪制任務從JavaScript引擎中，經由C/C++層轉移到Objective-C/Java層，這會導致一定的性能開銷。而對于Android來說，從C/C++層轉移到Java層又涉及JNI調用，會帶來額外的性能開銷。由于Flutter繪制沒有跨層，保障了從執行到渲染都在底層高效率完成，沒有額外的性能損失。綜合以上幾點，Flutter實現了接近原生的執行效率。

3 高度雙端代碼復用

對于跨端框架來說，代碼復用率是一個核心考量指標，畢竟跨端的目的就在于此。跨端應用代碼可以分為三部分：業務邏輯代碼、UI視圖代碼，以及兩端差異化適配代碼。

在React Native中，由于基于JavaScript引擎和React生態進行應用開發，能夠實現業務邏輯的完全復用。但React Native的底層視圖層是基于兩端原生視圖進行封裝導出，嚴格來說這只是做到了接口復用，并沒有實現底層視圖代碼的復用。

在Flutter中，由于采用自渲染方案，兩端從運行時環境到底層渲染都完全一致，因此可以實現最大化的雙端復用。在實際工作中，基本90%的代碼能夠實現雙端復用，剩下的10%即兩端差異化適配代碼。

4 更高的開發效率

Flutter帶來了一套全新的開發模式，這套開發模式非常優秀，因此帶來了遠高于原生開發的開發效率，主要體現在以下幾個方面。

Flutter選用Dart語言進行開發，Dart語言是一門容易上手、功能強大的語言。容易上手體現在其語法與Java、JavaScript非常相似，開發者只要熟悉其中一種語言就能夠快速上手。同時Dart是一門強類型語言，這對于開發大型商業應用來說是必需的。Dart也是一門功能強大的編程語言，不論是函數式編程、OOP編程、還是泛型、異步，都能夠非常好的支持。從語言層面，不論是簡單功能還是復雜功能，使用Dart開發都能實現較高的開發效率。

Flutter借鑒React設計了一套自己的組件式框架。組件式框架是前端開發效率高于傳統原生的一個重要因素。同時Flutter提供了大量功能、布局組件，開發者可以快速實現UI布局，同時基于組件式設計讓應用具備較好的架構分層。

傳統開發效率之所以低，大部分時間都浪費在了編譯上。尤其是在UI開發中，有時不得不反復編譯應用調試效果，每次編譯耗費的時間少則幾分鐘，多則十幾分鐘。Flutter在開發階段使用JIT模式編譯Dart代碼，通過Hot Reload特性，代碼更改可以直接應用到設備中，實現“亞秒級”的效果實時展示，大幅提高了開發效率。

5 跨端動畫效果

移動應用強調用戶體驗，其中動畫效果起到很大作用，動畫為用戶帶來了賞心悅目、流暢的操作體驗。跨端框架的動畫開發效率和運行效率在開發初期容易被忽視，但實際是十分重要的衡量因素。

動畫對性能有比較高的要求，尤其是復雜動畫，需要以60幀甚至更高的幀率運行才能保證流暢效果。網頁跨端方案運行在WebView中，由于執行效率低，復雜動效的體驗不佳。Re-act Native有多套動畫框架，有的采用純JavaScript實現，因此執行效率也較低，有的采用橋接到原生實現，同樣存在從JavaScript橋接到原生的性能折損，同時由于實現更加復雜，會降低開發效率。

動畫的開發效率取決于動畫框架，在原生開發中系統提供的動畫框架易用度不高，開發成本較高。因此原生開發誕生了許多優秀的第三方開源庫，簡化了動畫實現的開發成本，但由于兩端的動畫底層框架不統一，在實現雙端對齊時仍需要一定的開發成本。

Flutter由于自建繪制引擎，在動畫的性能上有先天優勢，能夠實現接近原生的執行效率，這是超越同類跨端框架的。

在開發效率上，Flutter提供了一套功能強大、簡單易用的動畫框架，能夠方便地實現各種動畫效果。同時Flutter的動畫效果也是雙端像素級別對齊的，實現了真正的動畫代碼雙端復用。

6 先進的應用架構理念

前端領域經過近年的快速發展，在應用架構理念上誕生了許多新的最佳實踐，比如組件式框架和全局狀態管理器等，原生開發相比之下處于落后階段。應用架構模式決定了復雜項目的業務分層和職責劃分，好的架構能夠保障業務代碼健康有序地增長，提高可維護性。

對于一個復雜的商業項目，后期的開發效率不僅取決于技術選型，更多地取決于架構設計的合理性。早期的架構設計不合理造成的技術債務，會影響到后期的功能開發。

Flutter雖然沒有直接采用前端JavaScript生態，但它在設計中大量借鑒了前端架構理念，不論是組件化框架還是全局狀態管理器均有Dart下的實現。前端流行的架構模式在Flutter下均有對應實現，同時Flutter開源生態中也發展出了帶有Flutter特色的新架構模式。通過這些架構模式，Flutter具備開發復雜的商業項目的架構基礎。

7 未來發展潛力巨大

從2018年正式推出至今，僅兩年多時間Flutter就獲得了如此大的發展與關注，從客觀說明了Flutter技術極具潛力。

創新性的技術選型，以及對跨端技術難點問題帶來的突破性改進使Flutter成為移動跨端領域的佼佼者，越來越多的應用基于Flutter開發，越來越多的互聯網巨頭投入到Flutter的發展中。

Flutter的技術特點使其跨端能力極強，不僅能夠跨移動端，也能夠運行在Web端及桌面平臺。更廣泛的跨端能力是Flutter當下發展的重點。在Google的規劃中，Flutter已不僅是一個移動端跨端框架，而是要成為一個跨Web、桌面、移動端的全覆蓋跨端框架。

對于讀者來說，學習Flutter是一項非常值得的投資，通過學習Flutter，不僅能夠具備出色的跨端開發能力，在未來隨著全覆蓋跨端的完善，直接獲得了全平臺開發能力，投入回報非常高。

同時，Flutter還是Google下一代操作系統Fuchsia的UI框架，雖然這個系統目前仍處于試驗階段，未來是否能夠成功還是一個未知數。假設Fuchsia未來有一天替代了Android系統，此時對Flutter的學習投入就更加有價值，讓自己先人一步，掌握先機。

1.2.2 Flutter整體架構

前文對Flutter進行了整體介紹，相信讀者對Flutter的Skia自渲染、組件式框架，以及這些技術所帶來的優勢有了初步的了解。但是這些技術是如何組織到一起，如何共同支撐起Flutter的功能？本小節通過介紹Flutter整體架構，對這些問題進行解答。

Flutter整體架構可以分為3層，從上到下分別是框架層（Framework）、引擎層（Engine），以及嵌入層（Embedder），如圖1-5所示。

下面按照自底向上的方式，對各層進行介紹。

1 嵌入層

Flutter是一個跨端框架，Flutter將適配一個操作系統所需的原生能力抽象出來作為嵌入層。因此在任何一個操作系統上，只要實現嵌入層接口，就實現了Flutter在這個平臺上的跨端能力。

原生系統需要向Flutter提供一個Surface視圖用于UI展示，Flutter會像“放電影”一樣將Flutter應用的UI投射到這個視圖上。原生系統還需要處理用戶的輸入手勢，并轉為Flutter手勢格式傳給Flutter。除此之外，原生系統還要為Flutter準備好其所需的線程和消息隊列，以及一些原生能力的封裝與導出。

嵌入層的實現語言與平臺相關，例如，在Android上使用Java和C++完成適配，在iOS上使用Objective-C/Objective-C++完成適配。

2 引擎層

引擎層顧名思義，它驅動了Flutter應用的執行，是Flutter的核心，由C/C++實現。引擎層中包含了Dart運行時和Skia底層繪制庫，分別用于執行Dart代碼、底層布局、文本等繪制工作。

引擎層負責幀調度及UI的底層繪制工作。它提供了Flutter核心API的底層實現，包括圖形繪制（通過Skia引擎）、文本布局、文件和網絡I/O、可訪問性支持、插件架構，以及Dart運行時和編譯工具鏈。

這些能力運行在嵌入層提供的能力之上，使用C++進行實現，最終被包裝為Dart庫供上層調用，如dart：ui庫。

3 框架層

框架層實現了Flutter的應用層框架，前文中說到的Flutter組件化框架、動畫框架、UI組件庫等均位于這一層。這一層的代碼均使用Dart語言開發，開發者日常與Flutter打交道的也是這一層。

在這一層中，自底向上又可細分為一系列內部層次。

首先是Foundation定義了Flutter應用框架中最基礎的類，比如AbstractNode抽象節點、ChangeNotifier通知監聽器、組件標識Key等。這些類是支撐Flutter應用框架功能的基礎。

往上一層包含三部分內容，分別是動畫、繪制與手勢，它們提供了Flutter的UI基礎。

基于UI基礎來到了Rendering渲染層，它提供了布局能力，并定義了RenderObject樹的概念，通過這套機制可以確定UI組件在界面中的位置、大小，以及如何繪制。

渲染層之上是組件層，它為Flutter帶來了組件化的開發模式。在Flutter開發中，“一切皆組件”都是基于這一層所定義的組件框架實現。Flutter中的組件采用響應式編程的開發模式，也是在這一層中實現的。

基于組件的概念，Flutter提供了大量現成的組件供開發者使用，這些組件提供了方方面面的功能，大大提高了開發者的開發效率。其中，包含了大量UI組件，這些UI組件整體可分為兩個組件庫Material和Cupertino，分別對應Android和iOS的設計風格。開發者在進行UI開發時，可根據自己應用的設計風格，選擇使用相應組件庫中的UI組件。

1.2.3 Flutter與同類方案對比

在完成了對Flutter框架的介紹后，本小節再對Flutter與已有跨端框架進行橫向對比，相信通過對比，讀者能夠對Flutter的技術特點有更加深入的理解。

1 Flutter與基于WebView方案對比

基于WebView方案包括網頁跨端與小程序等方案。由于WebView執行效率較低，因此自建引擎的Flutter在執行效率上大幅領先這一類方案，且接近于原生效率。

在雙端代碼復用方面，WebView方案基于HTML/CSS/JavaScript三劍客，或者基于這三者實現的優化方案，能夠實現雙端高度代碼復用。Flutter基于自身Flutter應用框架，也能夠實現高度代碼復用。因此在這一點上，兩者不相上下。

在開發效率方面，WebView方案基于前端開發生態，具備較高的開發效率。Flutter應用框架借鑒自前端，因此同樣也具備較高的開發效率，因此也是不相上下。

從原生能力導出方面，WebView方案的JSBridge方式要相對弱一些，Flutter基于Channel機制建立Plugin生態，有大量開源Plugin封裝了各種原生能力可直接復用，因此Flutter在原生能力集成方面更為優異。

從動態性方面，WebView方案是目前動態性最好的方案，Flutter則默認不支持動態性，從這一點上WebView方案勝出。

整體來說，Flutter的性能遠高于WebView方案，因此能夠勝任更多對性能體驗有要求的場景。同時Flutter的原生擴展生態更為強大，基于原生生態能夠更好地開發出原生體驗的應用。但對于強調動態化的場景，則WebView方案是更好的選擇。

2 Flutter與基于原生導出方案對比

原生導出方案包括React Native、Weex等，是最終通過平臺原生能力進行渲染的方案。

這類方案通常會選用JavaScript引擎進行動態腳本解析，JavaScript腳本的執行效率低于原生，同時由于需要橋接到原生進行渲染，存在通信成本，因此整體運行效率也遠遠低于Flutter。

這類框架還存在一個架構難題，即跨端一致性。由于是對雙端的原生視圖組件進行封裝，實現接口層復用，而雙端視圖組件的一些實現細節是難以對齊的，因此如何實現高度一致是這類框架的一個難點。自渲染的Flutter引擎天生不存在這一問題，能夠實現像素級的多端一致。

在開發效率方面，React Native基于React框架，Flutter框架也是大量借鑒了React，因此在開發效率方面兩者基本是一致的。

在動態性方面，React Native框架基于JavaScript引擎，可以實現動態化。Flutter底層是支持動態化的，但Google并沒有將這個能力開放出來。在這一點上React Native更為突出。

從整體來說，Flutter的性能依舊高于原生導出方案，并且最大的優勢在于先天的多端一致性，這是原生導出方案難以完美解決的。因此，如果不考慮動態性，Flutter會是更好的方案。

值得一提的是，React Native也是目前主流的跨端方案之一，經過多年發展，雖然在多端一致性方面難以實現完美，但也能夠保證高度一致。同時React Native完全基于前端生態，前端生態是整個大前端領域中最有活力的，大量新技術層出不窮。同時由于基于Web技術棧，也能夠與Web開發技能進行較好的遷移復用。因此目前React Native依舊吸引了大量開發者。

由此也可看出，Flutter為跨端開發領域帶來了新的可能性，因此引發了一輪熱潮，而已有老牌框架依舊煥發著生機，移動跨端領域呈現出百花齊放的狀態。這表明了移動跨端領域的勃勃生機，不斷向生產力更高的方向快速發展。