基于flutter的移動應用跨平臺開發的研究

寧君宇 袁芳芳 田路強 陳森

摘 要：移動互聯網時代下的移動應用開發，面臨著周期短、性能強、成本低的需求，而移動系統與終端設備的碎片化，使得移動開發顯然無法滿足上述需求。因此跨平臺開發就順理成章的進入人們的視野。本文首先介紹移動應用跨平臺開發當下常用的方案，及各方案所解決的問題和存在缺陷，然后介紹flutter的關鍵技術及如何解決移動應用跨平臺開發當前遇到的問題。

關鍵詞：flutter;移動應用;跨平臺開發

中圖分類號：TP311.56

移動互聯網時代，以它獨有的變革方式，使我們的生活變的快捷、經濟、安全和方便。移動應用更是深入到人們的生活當中，充當著各種各樣的角色，同時人們對移動應用的需求和要求也在不斷增多和增強，這就使得移動應用需要更高的開發效率和更好的用戶體驗。而當前移動應用主要分為兩大平臺iOS和Android，若使用原生方式來開發App，不僅要求分別針對iOS和Android平臺，使用不同的語言實現同樣的產品功能，還要對不同的終端設備和不同的操作系統進行功能適配，并承擔由此帶來的測試維護升級工作，不僅降低了開發效率，用戶體驗也很難統一起來。為了解決這一系列問題，移動應用跨平臺開發應勢而生。

1 移動應用跨平臺開發

目前移動應用的跨平臺開發常用方案有web容器類方案、原生渲染類方案。

web容器類方案的代表技術有基于HTML5和原生控件混合開發的Hybrid開發模式。主要采用的是原生應用內嵌瀏覽器控件WebView的方式進行HTML5頁面渲染，并定義HTML5與原生代碼交互協議，將部分原生系統能力暴露給HTML5，從而擴展HTML5的邊界。這種開發模式實現了開發一次，即可多平臺運行的需求，降低移動應用的開發成本和開發周期。但由于HTML5頁面的展示要經歷瀏覽器控件的加載、解析和渲染三大過程，性能消耗非常的大，這也就使得這種跨平臺開發方案的性能瓶頸很嚴重。

原生渲染方案吸取了web容器方案的性能瓶頸教訓，采用了原生渲染的方式來解決繪制問題，代表技術有FaceBook的React Native和阿里Weex，他們的實現機制相似，都是采用原生自帶的UI組件實現代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。但為了保證上層語言和原生自帶的UI組件良好溝通，它們之間的溝通橋梁十分重要，但是各平臺都有其各自實現方式，導致橋梁的復雜性在不斷的增加，尤其是涉及到復雜跨橋的調用的時候，會出現一些性能上的問題，維護成本也隨之提高了很多。

原生渲染方案解決了web容器類方案性能瓶頸問題以及用戶體驗問題，但是其自身的難維護、適配復雜的問題也十分讓人頭痛。針對以上方案的弊端，移動應用跨平臺開發的第三類方案，自繪UI方案。flutter就是自繪UI方案中的代表。

2 flutter概述

flutter是谷歌2018年發布的跨平臺移動UI框架，是構建Google物聯網操作系統Fuchsia的SDK，主打跨平臺、高保真、高性能。開發者可以通過Dart語言開發App，一套代碼可以同時運行在iOS和Android平臺。flutter使用Native引擎渲染視圖，并提供了豐富的組件和接口，這無疑為開發者和用戶都提供了良好的體驗。

3 flutter關鍵技術

flutter開辟了一種全新的思路，即從頭到尾重寫一套跨平臺的UI框架，包括渲染邏輯，甚至是開發語言。通過這樣的思路，可以盡可能地減少不同平臺之間的差異，同時保持和原生開發一樣的高性能，同時flutter借助先進的工具鏈和編譯器，成為了少數同時支持JIT和AOT的語言之一，開發期調試效率高，發布期運行速度快、執行性能好，在代碼執行效率上可以媲美原生App，也成了目前最受業界關注的框架。

3.1 flutter的原理

flutter的架構圖如下圖所示：

flutter架構采用分層設計，從下到上分為三層，依次為：Embedder、Engine、Framework。Embedder是操作系統適配層，實現了渲染Surface設置，線程設置，以及平臺插件等平臺相關特性的適配。從這里我們可以看到，flutter平臺相關特性并不多，這就使得從框架層面保持跨端一致性的成本相對較低.Engine層主要包含Skia、Dart和Text，實現了flutter的渲染引擎、文字排版、事件處理和Dart運行時等功能。Skia和Text為上層接口提供了調用底層渲染和排版的能力Dart則為flutter提供了運行時調用Dart和渲染引擎的能力。而Engine層的作用，則是將它們組合起來，從它們生成的數據中實現視圖渲染。Framework層則是一個用Dart實現的UI SDK，包含了動畫、圖形繪制和手勢識別等功能。為了在繪制控件等固定樣式的圖形時提供更直觀、更方便的接口，flutter還基于這些基礎能力，根據Material和Cupertino兩種視覺設計風格封裝了一套UI組件庫。我們在開發flutter的時候，可以直接使用這些組件庫。

3.2 flutter的渲染

渲染引擎依靠跨平臺的Skia圖形庫來實現，Skia引擎會將使用Dart構建的抽象的視圖結構數據加工成GPU數據，交由OpenGL最終提供給GPU渲染，至此完成渲染閉環，因此可以在最大程度上保證一款應用在不同平臺、不同設備上的體驗一致性。

3.3 Dart

flutter使用Dart作為開發語言主要是因為flutter使用Dart語言開發，主要有以下幾點原因：Dart一般情況下是運行DartVM上，但是也可以編譯為ARM代碼直接運行在硬件上Dart同時支持AOT和JIT兩種編譯方式，可以更好的提高開發以及App的執行效率。Dart可以利用獨特的隔離區（Isolate）實現多線程。而且不共享內存，可以實現無鎖快速分配。分代垃圾回收，非常適合UI框架中常見的大量Widgets對象創建和銷毀的優化。在為創建的對象分配內存時，Dart是在現有的堆上移動指針，保證內存的增長是程線性的，于是就省了查找可用內存的過程。

4 flutter展望

flutter的到來，將移動應用跨平臺開發代入了自繪UI方案的時代，它從web容器類方案、原生渲染類方案中汲學習和借鑒了很多優秀的設計，很多概念兩邊都有對應，比如React Native的Component和Flutter的Widget、Flex布局思想、狀態管理和函數式編程等等，這類的知識都是兩個框架通用的技術。未來也許還會出現新的解決方案，老框架也會不斷更新，只有掌握核心原理才能真正立于不敗之地。

5 結語

本文首先介紹了移動應用跨平臺開發的各種解決方案及其優缺點，說明了flutter的到來解決了哪些問題，然后分析了flutter的關鍵技術，這讓我們知道flutter是一個設計理念革新，架構優異的方案，不久之前，Google團隊已經完成了flutter的Web的官方Demo，在桌面操作系統的探索上也取得了進展，未來大前端技術棧是否會由flutter完成統一，值得期待。

參考文獻：

[1]施偉，王碩蘋，郭鳴，等.跨平臺移動旌用中間適配層設計與實現[J].計算機工程與應用，2014（16）.

[2]陸鋼，朱培軍，李慧云，文錦軍.智能終端跨平臺應用開發技術研究[J].電信科學，2012，28（05）：14-17.

[3]李麗平，薛玉倩.基于HTML5跨平臺移動應用開發的研究與實踐[J].河北軟件職業技術學院學報，2017，19（02）：35-38.

[4]張呈宇.基于HTML5的跨平臺移動APP開發研究[J].通訊世界，2018（08）：46-47.

[5]邢曉鵬.HTML5核心技術的研究與價值分析[J].價值工程，2011（22）.