前言

隨著移動開發技術的日漸成熟，一些廠商開始考慮跨平臺技術的解決方案，從早期的Cordova、Xamarin，再到后來的React Native和Weex等等，可謂是百家齊放，每種框架都有各自的優缺點，但目標都是一致的，就是提升應用的開發效率，降低研發成本，一套代碼運行多個平臺。這些框架除了Xamarin外都是采用Web端技術開發移動端應用，但提供比Web更好的用戶體驗。

以上框架中Cordova其實是一個Webapp框架，提供了針對iOS、Android、WP、BlackBerry等不同系統最常用的Native API調用能力，其本質還是由webkit做UI渲染，因此其性能和原生相比還有很大差距；而Xamarin筆者了解不多，又是個收費的項目，不再做擴展，有興趣的可自行了解；React Native和Weex原理基本一樣，都是基于js的開發框架，React Native基于React.js，Weex基于Vue.js，其本質都是通過虛擬DOM驅動原生組件的渲染，因此性能和體驗比較接近原生，然而其需要通過橋接器來驅動原生渲染的過程，導致其在性能上與原生還是有一定差距。基于以上框架的缺點，Flutter框架應運而生。

Flutter面世

Flutter是Google在2015年推出的移動UI框架，可快速在iOS和Android上構建高質量的原生用戶界面。

Flutter第一次亮相于2015年5月Dart開發者峰會上，初始名字叫做“Sky”，后更名為Flutter，Flutter使用Dart語言開發，Dart是Google于2011年推出的新的計算機編程語言。

Flutter特點

• 快速開發

由于Flutter選用了Dart作為其開發語言，Dart既可以是AOT（Ahead Of Time）編譯，也可以是JIT（Just In Time）編譯，其JIT編譯的特性使Flutter在開發階段可以達到亞秒級有狀態熱重載，從而大大提升了開發效率。

• 性能優越

使用自帶的高性能渲染引擎（Skia）進行自繪，渲染速度和用戶體驗堪比原生。

• 富有表現力的精美UI

Flutter內置眾多精美的Material Design和Cupertino（iOS風格）小部件，開發者可快速構建精美的用戶界面，以提供更好的用戶體驗。

Flutter框架

Flutter系統架構圖

flutter_system_overview.png

如上圖所示為Flutter官方給出的系統架構圖，可以看出Flutter框架分為三層：Framework層、Engine層和Embedder層。

• Framework層：由Dart來實現，包含眾多安卓Material風格和iOS Cupertino風格的Widgets小部件，還有渲染、動畫、繪圖和手勢等。Framework包含日常開發所需要的大量API，普通應用開發熟悉這些API的使用基本OK了，不過很多特殊場景的控件需要自己根據實際情況進行自定義。Framework層的源碼地址：https://github.com/flutter/flutter/tree/master/packages/flutter/lib

• Engine層：由C/C++實現，是Flutter的核心引擎，主要包括Skia圖形引擎、Dart運行時環境Dart VM、Text文本渲染引擎等；如果想深入了解Flutter原理，建議閱讀該層的源代碼。源代碼地址：https://github.com/flutter/engine

• Embedder層：主要處理一些平臺相關的操作，如渲染Surface設置、本地插件、打包、線程設置等。

Flutter原理

無論是iOS還是安卓都是提供一個平臺的View給Flutter層，頁面內容渲染交由Flutter層自身來完成，所以其相對React Native等框架性能更好。Flutter中圖形渲染流程：

flutter_graphics_pipeline.png

大致流程如下：

1. GPU的Vsync信號同步到UI線程
2. UI線程使用Dart來構建抽象的視圖結構
3. 視圖結構在GPU線程中進行圖層合成
4. 合成后的視圖數據提供給Skia圖形引擎處理成GPU數據
5. 數據再通過OpenGL或Vulkan提供給GPU進行渲染

寫在最后

本篇簡單介紹了一下Flutter的特點和其框架基本原理，后續隨著最佳實踐的分享，回過頭來看這篇文章會更清晰一些，敬請期待！

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18396.html