前言
隨著移動(dòng)開發(fā)技術(shù)的日漸成熟诗宣，一些廠商開始考慮跨平臺(tái)技術(shù)的解決方案掷豺，從早期的Cordova、Xamarin赎瑰，再到后來的React Native和Weex等等王悍，可謂是百家齊放，每種框架都有各自的優(yōu)缺點(diǎn)乡范，但目標(biāo)都是一致的配名，就是提升應(yīng)用的開發(fā)效率啤咽，降低研發(fā)成本，一套代碼運(yùn)行多個(gè)平臺(tái)渠脉。這些框架除了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官方給出的系統(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層：主要處理一些平臺(tái)相關(guān)的操作止毕，如渲染Surface設(shè)置模蜡、本地插件、打包扁凛、線程設(shè)置等忍疾。
Flutter原理
無論是iOS還是安卓都是提供一個(gè)平臺(tái)的View給Flutter層，頁面內(nèi)容渲染交由Flutter層自身來完成谨朝，所以其相對React Native等框架性能更好卤妒。Flutter中圖形渲染流程：
大致流程如下：
- GPU的Vsync信號同步到UI線程
- UI線程使用Dart來構(gòu)建抽象的視圖結(jié)構(gòu)
- 視圖結(jié)構(gòu)在GPU線程中進(jìn)行圖層合成
- 合成后的視圖數(shù)據(jù)提供給Skia圖形引擎處理成GPU數(shù)據(jù)
- 數(shù)據(jù)再通過OpenGL或Vulkan提供給GPU進(jìn)行渲染
寫在最后
本篇簡單介紹了一下Flutter的特點(diǎn)和其框架基本原理，后續(xù)隨著最佳實(shí)踐的分享字币，回過頭來看這篇文章會(huì)更清晰一些则披，敬請期待！
