Flutter是google近年來(lái)新推出的跨平臺(tái)移動(dòng)UI框架，可以在ios和Android系統(tǒng)上快速構(gòu)建出高質(zhì)量，體驗(yàn)較高的原生界面，同時(shí)Flutter還將會(huì)作為google新一代操作系統(tǒng)Fuchsia的Toolchain，這對(duì)Flutter的未來(lái)發(fā)展前景是一個(gè)強(qiáng)有力的支撐。寫(xiě)這篇文章時(shí)，中國(guó) GDG 2018 剛剛落幕，Flutter團(tuán)隊(duì)在大會(huì)上發(fā)布了release之前的最后一個(gè)preview版本。扇貝移動(dòng)團(tuán)隊(duì)近期也對(duì)Flutter如何應(yīng)用到扇貝產(chǎn)品上做了一番探索和實(shí)踐。

Hello Flutter

Flutter項(xiàng)目可以用同一套代碼同時(shí)在ios和Android操作系統(tǒng)上運(yùn)行，在此之前，市面上已經(jīng)存在了很多跨平臺(tái)解決方案，扇貝的移動(dòng)產(chǎn)品上在跨平臺(tái)開(kāi)發(fā)上一直采用Webview加React Native的解決方案。

Webview的優(yōu)缺點(diǎn)都非常明顯，優(yōu)勢(shì)是可以完全用Web開(kāi)發(fā)的技術(shù)棧去實(shí)現(xiàn)，app只需要提供webview組件承載即可，同時(shí)可以隨時(shí)更新頁(yè)面，動(dòng)態(tài)性很高，并且這些頁(yè)面可以完全交由web開(kāi)發(fā)人員開(kāi)發(fā)迭代，移動(dòng)端不需要太關(guān)心，但是Webview的缺點(diǎn)又很多，渲染的性能一直被開(kāi)發(fā)者詬病，內(nèi)置的Chrome內(nèi)核在國(guó)內(nèi)的機(jī)型上也會(huì)有不兼容的情況發(fā)生。

React Native在活動(dòng)頁(yè)面和商品頁(yè)面得到了使用，RN相對(duì)于Webview來(lái)說(shuō)，性能和渲染效率都得到了不小的提升，它是將編寫(xiě)好的web界面利用JSCore轉(zhuǎn)換成原生控件，同時(shí)配合動(dòng)態(tài)更新系統(tǒng)可以發(fā)布新版本的RN包來(lái)實(shí)現(xiàn)動(dòng)態(tài)更新界面，但是RN和系統(tǒng)的關(guān)聯(lián)性較強(qiáng)，很多功能需要依賴(lài)系統(tǒng)特性開(kāi)發(fā)，debug成本也相對(duì)比較高，移動(dòng)端的同學(xué)也需要對(duì)RN有一些了解來(lái)配合前端開(kāi)發(fā)。

因此我們將目光投向了Flutter。

Flutter的特點(diǎn)

• Dart可以運(yùn)行前編譯（AOT），在開(kāi)發(fā)flutter應(yīng)用的時(shí)候布局文件會(huì)直接通過(guò)源碼編寫(xiě)node tree，從而避免了大量的解析轉(zhuǎn)譯時(shí)間，使得Dart的效率比JS更高。
• Dart語(yǔ)言同樣支持JIT編譯，因此flutter可以hot reload，為開(kāi)發(fā)周期提速。
• Dart沒(méi)有鎖的概念，可以做到對(duì)象回收和GC，Dart中的線程叫做isolates，因?yàn)椴还蚕韮?nèi)存的原因，同時(shí)和js一樣是單線程操作，所以不會(huì)出現(xiàn)搶占調(diào)度和鎖死的問(wèn)題。開(kāi)發(fā)者控制線程的時(shí)候需要顯式創(chuàng)建線程，最常用的是async和await。
• Flutter用Dart語(yǔ)言開(kāi)發(fā)，因?yàn)镕lutter主要用來(lái)開(kāi)發(fā)用戶界面，Dart語(yǔ)言的特性適合了用戶構(gòu)建用戶界面時(shí)的操作邏輯，沒(méi)有像Android的xml文件和前端的html文件這樣的單獨(dú)布局文件，使得開(kāi)發(fā)更簡(jiǎn)潔，預(yù)覽更方便。
• Flutter不再受限于native，自己開(kāi)發(fā)了一套渲染邏輯，因此在未來(lái)的性能優(yōu)化和跨平臺(tái)相比RN優(yōu)勢(shì)會(huì)更加明顯。

關(guān)于Flutter的具體使用可以前往官網(wǎng)學(xué)習(xí) flutter.io

Flutter的依賴(lài)是在Pub倉(cāng)庫(kù)中管理，項(xiàng)目的依賴(lài)在根目錄下的pubspec.yaml中進(jìn)行配置，例如如下配置:

dependencies:flutter:sdk: flutterjson_annotation: ^1.0.0intl: ^0.15.7 復(fù)制代碼

關(guān)于依賴(lài)的package版本可以有兩種寫(xiě)法

• packagename: ^version 引入某個(gè)版本的package
• packagename: ‘>=version’ 引入某個(gè)版本之后的package，用來(lái)約束最低或最高版本

在pubspec.yaml文件中聲明依賴(lài)之后需要執(zhí)行package get命令，國(guó)內(nèi)開(kāi)發(fā)者可能需要科學(xué)上網(wǎng)才能拉下來(lái)依賴(lài)包，Flutter為國(guó)內(nèi)開(kāi)發(fā)者提供了本地化的網(wǎng)站和鏡像。只需要簡(jiǎn)單配置即可。 using Flutter In China

技術(shù)預(yù)研

在對(duì)Flutter方案做技術(shù)預(yù)研的時(shí)候，我們羅列出了一些需要探索和解決的問(wèn)題。

• 重寫(xiě)界面的成本
• Flutter和原生互相通信問(wèn)題
• 圖片資源增加包體積
• Flutter如何構(gòu)建到現(xiàn)有項(xiàng)目

重寫(xiě)界面成本

既然開(kāi)始選用Flutter作為預(yù)備跨平臺(tái)方案，而且是Android和ios團(tuán)隊(duì)負(fù)責(zé)開(kāi)發(fā)維護(hù)，就需要了解一下Flutter的學(xué)習(xí)和開(kāi)發(fā)成本。

Dart是Flutter前期在對(duì)十幾種語(yǔ)言進(jìn)行調(diào)研之后最后選擇的語(yǔ)言，它天然支持響應(yīng)式編程，Dart2的升級(jí)是進(jìn)一步優(yōu)化客戶端的開(kāi)發(fā)，編寫(xiě)出的代碼結(jié)構(gòu)清晰，有一定程序設(shè)計(jì)基礎(chǔ)的開(kāi)發(fā)人員不需要經(jīng)過(guò)系統(tǒng)的學(xué)習(xí)就可以上手進(jìn)行Flutter開(kāi)發(fā)。

Flutter提供了大量基于Android material design風(fēng)格和ios Cupertino風(fēng)格的控件，可以通過(guò)組合嵌套的方式構(gòu)建界面，需要注意的是在Flutter里面屬性也是控件的概念，例如Padding、Center、Align等。具體查看Widgets Catalog。

Flutter和原生互相通信

以Android為例，Dart調(diào)用Java代碼可以通過(guò)MethodChannel來(lái)實(shí)現(xiàn)，Java調(diào)用dart則用EventChannel來(lái)實(shí)現(xiàn)。

因?yàn)樾枰肍lutter重寫(xiě)的頁(yè)面有涉及到網(wǎng)絡(luò)請(qǐng)求的問(wèn)題，之前的Android項(xiàng)目里實(shí)現(xiàn)了一套完整的網(wǎng)絡(luò)請(qǐng)求框架，封裝了項(xiàng)目需要的一些附帶請(qǐng)求信息和處理邏輯等，我們目前還不需要為Flutter項(xiàng)目單獨(dú)實(shí)現(xiàn)一個(gè)完整網(wǎng)絡(luò)請(qǐng)求框架，所以將網(wǎng)絡(luò)請(qǐng)求通過(guò)dart調(diào)用java的方式在java層進(jìn)行網(wǎng)絡(luò)請(qǐng)求然后callback到flutter頁(yè)面上，有因?yàn)榫W(wǎng)絡(luò)請(qǐng)求是異步的，dart的async/await關(guān)鍵字可以提供異步支持。

MethodChannel

首先在dart代碼中實(shí)例化MethodChannel對(duì)象，然后在需要調(diào)用java代碼的時(shí)候調(diào)用invokeMethod方法。

static const methodChannel = const MethodChannel('com.shanbay.shared.data/method'); Future<ProfileModel> _getProfileJson() async {mProfileJson = await platform.invokeMethod("getProfileJson");if (mProfileJson != null) {setState(() {Map profileMap = json.decode(mProfileJson);mProfileData = new ProfileModel.fromJson(profileMap);});}} 復(fù)制代碼

在java中注冊(cè)MethodChannel，注意channel的名字需要相同。

private static final String METHOD_CHANNEL = "com.shanbay.shared.data/method"; private MethodChannel mMethodChannel; @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);GeneratedPluginRegistrant.registerWith(this);mMethodChannel = new MethodChannel(getFlutterView(), METHOD_CHANNEL);...... } mMethodChannel.setMethodCallHandler(MethodChannel.MethodCallHandler() {@Overridepublic void onMethodCall(MethodCall call, final MethodChannel.Result result) {if(call.method.equals("getProfileJson"){//do somethingresult.success(json);} } 復(fù)制代碼

EventChannel

有時(shí)候在頁(yè)面接收到了一個(gè)event事件要?jiǎng)討B(tài)刷新或者修改頁(yè)面，需要java調(diào)用dart。 在dart代碼中實(shí)例化EventChannel對(duì)象

static const eventChannel = const EventChannel('com.shanbay.shared.data/event'); StreamSubscription _subscription = null;@overridevoid initState() {super.initState();//開(kāi)啟監(jiān)聽(tīng)if (_subscription == null) {_subscription = eventChannel.receiveBroadcastStream().listen(_onEvent, onError: _onError);}}@overridevoid dispose() {super.dispose();//取消監(jiān)聽(tīng)if (_subscription != null) {_subscription.cancel();}}void _onEvent(Object event) {setState(() {if (event.toString() == "refresh") {_getProfileJson();}});}void _onError(Object error) {setState(() {print(error);});}復(fù)制代碼

在java代碼中實(shí)例化相同一個(gè)EventChannel對(duì)象獲得event實(shí)例用來(lái)調(diào)用dart。

private static final String EVENT_CHANNEL = "com.shanbay.shared.data/event"; private EventChannel mChannel; @Override protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);GeneratedPluginRegistrant.registerWith(this);mChannel = new EventChannel(getFlutterView(), EVENT_CHANNEL);mChannel.setStreamHandler(new EventChannel.StreamHandler() {@Overridepublic void onListen(Object arguments, EventChannel.EventSink events) {mEvent = events;}@Overridepublic void onCancel(Object arguments) {}}); }onEvent(event) {mEvent.success("refresh"); } 復(fù)制代碼

圖片資源增加包體積

在我們現(xiàn)有的Android項(xiàng)目中往往只提供了xxhdpi分辨率的圖片資源，這樣做是為了減小apk包體積，讓其他分辨率的手機(jī)通過(guò)設(shè)備自適應(yīng)。Flutter對(duì)于圖片資源需要提供1x、2x、3x三種分辨率格式，這樣如果需要大量本地圖片資源，會(huì)增加一定的包體積。

美團(tuán)技術(shù)發(fā)表過(guò)一篇文章，他們針對(duì)flutter中需要復(fù)用的圖片資源采取的方案是對(duì)移動(dòng)app assets中的圖片按屏幕密度縮放并且存放到本地，然后dart中調(diào)用本地圖片。

這樣的方案在啟動(dòng)Flutter頁(yè)面之前就需要知道哪些圖片需要被存儲(chǔ)到本地，還要做一個(gè)圖片縮放和存儲(chǔ)的操作，我認(rèn)為這樣可能不能確保圖片的準(zhǔn)確性，同時(shí)需要Android和ios兩端同時(shí)支持，寫(xiě)兩份代碼，并且還要針對(duì)不同的flutter頁(yè)面記錄一個(gè)資源文件到頁(yè)面的映射表，成本有點(diǎn)過(guò)高，在我們團(tuán)隊(duì)內(nèi)實(shí)現(xiàn)有些繁瑣，而且我們要實(shí)踐的頁(yè)面只用到了少量的本地圖片，占用體積也不是很大，針對(duì)這種情況，可以直接用官方的三種分辨率，保證了Android、ios的兩端的同步。

Flutter如何構(gòu)建到現(xiàn)有項(xiàng)目

這個(gè)版塊我們計(jì)劃是采用將flutter項(xiàng)目打包成aar到Android項(xiàng)目中集成的方式構(gòu)建，其中踩到了一些坑，正在梳理，《Flutter在混合項(xiàng)目中的構(gòu)建和集成》會(huì)詳細(xì)說(shuō)明。

在個(gè)人信息頁(yè)的實(shí)踐

這個(gè)是我們flutter項(xiàng)目結(jié)構(gòu)，host是一個(gè)debug工程，可以直接編譯運(yùn)行，lib文件夾則是dart代碼。

最后形成的個(gè)人信息頁(yè)效果圖如下：

總結(jié)

Flutter的控件目前只提供了md風(fēng)格的基礎(chǔ)組件，想要自定義控件相對(duì)于Android和ios來(lái)說(shuō)還是有一些復(fù)雜度，但是Flutter團(tuán)隊(duì)通過(guò)原生渲染界面確實(shí)打破了原有的跨平臺(tái)解決方案的思路，性能和效率的提升是顯而易見(jiàn)的，相比RN來(lái)說(shuō)具有很大的優(yōu)勢(shì)。

dart目前在Android Studio上還不能支持代碼塊折疊，同時(shí)格式化還要手動(dòng)點(diǎn)擊，沒(méi)有快捷鍵，代碼塊折疊這一點(diǎn)對(duì)dart組合嵌套寫(xiě)界面來(lái)說(shuō)實(shí)在是太有必要了，希望可以后續(xù)不斷優(yōu)化開(kāi)發(fā)體驗(yàn)。

Flutter的引入無(wú)疑會(huì)增加包體積，preview2的發(fā)布，官方宣布release包體積將會(huì)再減小30%，一個(gè)空的release項(xiàng)目只需要4.7MB 的體積，對(duì)于現(xiàn)在流量吃到飽的情況，其實(shí)包體積壓縮這個(gè)話題可以慢慢的弱化了，優(yōu)化用戶體驗(yàn)是最重要的。

Flutter在扇貝聽(tīng)力上的實(shí)踐已經(jīng)打出了release包等待發(fā)布，我們會(huì)逐漸完善Flutter項(xiàng)目，在更多跨平臺(tái)場(chǎng)景上使用Flutter開(kāi)發(fā)。

參考資料

1.Flutter 文檔

2.Flutter Packages

3.Flutter原理與實(shí)踐

總結(jié)

以上是生活随笔為你收集整理的Flutter探索与实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。