如果你是一位前端開發(fā)工程師,對“跨平臺”一詞應(yīng)該不會感到陌生。像常見的前端框架:比如React、Vue、Angular,它們可以做網(wǎng)頁端,也可以做移動端,但很少能做到跨PC、Mac端,也就是我們熟知的Windows、Linux以及macOS上的應(yīng)用程序。即使有,受限于JS的性能瓶頸,當(dāng)有大量的科學(xué)計(jì)算需求時,則會略顯疲態(tài)。
有沒有一個理想的UI框架能夠通殺它們所有呢?答案是——Flutter。
做為一個通用的跨平臺的UI框架,F(xiàn)lutter在性能方面的突出表現(xiàn)是非常引人奪目的。拿Android舉例,一個安卓的原生APP在繪圖的時候,要先調(diào)用Android框架的Java代碼,然后再調(diào)用skia(C/C++)繪圖引擎代碼,最后生成的CPU或者gpu的指令,在設(shè)備上完成繪圖。而Flutter的APP在繪圖的時候,是先調(diào)用Flutter框架的Dart代碼,然后直接調(diào)用skia(C/C++)代碼。所以只要Flutter框架Dart代碼的效率可以媲美原生框架的Java代碼的時候,那么Flutter的性能就可以媲美原生APP。
而如React Native,它首先要調(diào)用框架本身的JavaScript代碼,然后再調(diào)用Android框架的Java代碼,然后調(diào)用skia,這比原生的App運(yùn)行過程多出了一個步驟,所以它的這個性能肯定是不及原生的。
國內(nèi)知名的“閑魚”技術(shù)團(tuán)隊(duì)對于Flutter在性能上逼近原生App的解釋如下:
1.預(yù)先(AOT)編譯,運(yùn)行時直接執(zhí)行Native(arm)代碼;
2.必需的同Native通信(channel)是C++層次,性能好;
3.其線程模型中Dart代碼執(zhí)行(在UI TaskRunner),圖片下載(IO TaskRunner),真正的渲染(GPU TaskRunner),同平臺的通信等(Platform TaskRunner即Native概念下的主線程)是互相隔離的。透過將耗時的邏輯放入IO TaskRunner或新開Isolate(會在Dart線程池中執(zhí)行);GPU TaskRunner可以將幀數(shù)據(jù)提交給GPU時UI TaskRunner已在準(zhǔn)備下一幀數(shù)據(jù)這種流水線的機(jī)制提高了渲染速度;
4.Flutter層面針對布局等的優(yōu)化:布局計(jì)算時單次樹走動即可完成;Relayout Boundary機(jī)制:如果Child 的size是固定的,那么不會因?yàn)镃hild的Relayout導(dǎo)致Parent ReLayout;Repaint Boundry機(jī)制:如果樹的某個子樹如果同樹的其他部分不同頻地重繪,那么RenderRepaintBoundary可以改善性能。
5.Skia團(tuán)隊(duì)針對Flutter的優(yōu)化。
6.框架的布局優(yōu)化對上層開發(fā)透明。
如果你有一定的前端開發(fā)經(jīng)驗(yàn),特別是移動端的開發(fā)經(jīng)驗(yàn),或者深入探究過Flutter,上述內(nèi)容應(yīng)該不難理解。
如今,使用Flutter開發(fā)移動端App的教程鋪天蓋地,我來手把手教你如何使用Flutter搞定PC、Mac端開發(fā),從此徹底打通前端跨平臺。
首先我們要確保Flutter開發(fā)環(huán)境準(zhǔn)備就緒。有關(guān)搭建開發(fā)環(huán)境的步驟,可參閱:
https://flutter.cn/docs/get-started/install
此處不再贅述,我們重點(diǎn)關(guān)注下面的操作:
到今天為止,在Stable分支上的Flutter SDK可以設(shè)置啟用PC端開發(fā)的能力,但實(shí)際上是無法使用的。因此,我們需要將其切換到master分支上。切換的方法是在命令行窗口執(zhí)行下面的語句:
flutter channel master
或許也可以直接git方式切換,但我沒有嘗試,感興趣的朋友可以自行嘗試。
在回顯切換成功的提示后,記得執(zhí)行
flutter upgrade
升級到最新的SDK(包含Dart)版本。
另外,如果你使用的是Windows的話,還需要安裝Visual Studio開發(fā)軟件,并安裝Desktop development with C++的Workload(中文名為:工作負(fù)載)。如果是macOS,則無需安裝Visual Studio。
在命令行執(zhí)行
flutter config --enable-windows-desktop
稍等幾秒后即可完成。控制臺將如下輸出:
Setting "enable-windows-desktop" value to "true".
You may need to restart any open editors for them to read new settings.
成功啟用后,執(zhí)行
flutter devices
列出已連接的調(diào)試設(shè)備列表,首次執(zhí)行可能會花費(fèi)一些時間下載必要的開發(fā)工具包。隨后,可以看到如下類似的輸出結(jié)果:
1 connected device:
Windows (desktop) · windows · windows-x64 · Microsoft Windows [Version 10.0.18363.900]
其他操作系統(tǒng)環(huán)境類似。
另外,我們也可以隨時執(zhí)行
flutter config
查看目前的配置。還可以隨時還原為默認(rèn)設(shè)定。
Settings:
enable-windows-desktop: true
這一步無需多言,在相應(yīng)的目錄下執(zhí)行
flutter create [項(xiàng)目名]
即可。
對于之前沒有啟用PC端開發(fā)支持的工程,或者需要遷移到PC、Mac端的工程,需要在項(xiàng)目根目錄下執(zhí)行
flutter create .
(注意最后的點(diǎn))
這一步無需多言,進(jìn)入項(xiàng)目根目錄,然后執(zhí)行
flutter run
即可看到運(yùn)行結(jié)果。
聯(lián)系客服