前言

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

以上框架中Cordova其實(shí)是一個(gè)Webapp框架，提供了針對iOS、Android、WP、BlackBerry等不同系統(tǒng)最常用的Native API調(diào)用能力，其本質(zhì)還是由webkit做UI渲染，因此其性能和原生相比還有很大差距；而Xamarin筆者了解不多，又是個(gè)收費(fèi)的項(xiàng)目，不再做擴(kuò)展，有興趣的可自行了解；React Native和Weex原理基本一樣，都是基于js的開發(fā)框架，React Native基于React.js，Weex基于Vue.js，其本質(zhì)都是通過虛擬DOM驅(qū)動(dòng)原生組件的渲染，因此性能和體驗(yàn)比較接近原生，然而其需要通過橋接器來驅(qū)動(dòng)原生渲染的過程，導(dǎo)致其在性能上與原生還是有一定差距。基于以上框架的缺點(diǎn)，F(xiàn)lutter框架應(yīng)運(yùn)而生。

Flutter面世

Flutter是Google在2015年推出的移動(dòng)UI框架，可快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。

Flutter第一次亮相于2015年5月Dart開發(fā)者峰會(huì)上，初始名字叫做“Sky”，后更名為Flutter，F(xiàn)lutter使用Dart語言開發(fā)，Dart是Google于2011年推出的新的計(jì)算機(jī)編程語言。

Flutter特點(diǎn)

• 快速開發(fā)

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

• 性能優(yōu)越

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

• 富有表現(xiàn)力的精美UI

Flutter內(nèi)置眾多精美的Material Design和Cupertino（iOS風(fēng)格）小部件，開發(fā)者可快速構(gòu)建精美的用戶界面，以提供更好的用戶體驗(yàn)。

Flutter框架

Flutter系統(tǒng)架構(gòu)圖

flutter_system_overview.png

如上圖所示為Flutter官方給出的系統(tǒng)架構(gòu)圖，可以看出Flutter框架分為三層：Framework層、Engine層和Embedder層。

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

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

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

Flutter原理

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

flutter_graphics_pipeline.png

大致流程如下：

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

寫在最后

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.kwpm.com.cn/18396.html