回到前臺黑屏引發(fā)對Flutter項目生命周期與安卓原生生命周期的思考

目前我們是flutter項目,有個需求是需要在app內(nèi)引導(dǎo)用戶去appStore或是安卓的應(yīng)用商店去評價,該需求我選用了兩個插件 in_app_review 和 launch_review , 然而仔做的過程中發(fā)現(xiàn)一個問題,當(dāng)彈出系統(tǒng)的跳轉(zhuǎn)應(yīng)用商店的彈框時,iOS是單一彈框,Android是彈出一個選擇打開商店的彈窗,可選擇打開一次或是始終選擇某一個商店打開,此時鎖屏,然后再解鎖,發(fā)現(xiàn)iOS沒啥問題,安卓系統(tǒng)彈框后的flutter頁面黑屏了

創(chuàng)新互聯(lián)是一家專業(yè)提供青銅峽企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、html5、小程序制作等業(yè)務(wù)。10年已為青銅峽眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

看到這個現(xiàn)象,目測是由于安卓的生命周期和flutter的生命周期沒有同步,以下是驗證過程

安卓的MainActivity添加生命周期方法

flutter 添加生命周期方法

還是剛才的場景 鎖屏 安卓和flutter的后臺方法都調(diào)用,解鎖回到前臺 只有安卓的前臺方法走 MainActivity會restart,flutter的resume方法,沒有調(diào)用,驗證了開始的猜想,是由于flutter沒有檢測到前臺操作或是這種情況flutter不認(rèn)為自己在前臺,導(dǎo)致flutter沒有執(zhí)行頁面的重新繪制導(dǎo)致黑屏

關(guān)于flutter的生命周期,查閱資料發(fā)現(xiàn) 我們可以手動刷新flutter頁面的狀態(tài),即使用

我們只需要在MainActivity restart的時候調(diào)用上述 方法 告知flutter重繪,該問題就解決了

關(guān)于原生加載flutter頁面 生命周期相關(guān) 看這里 能有一些啟發(fā)

Android原生和Flutter使用過程的差異對比（二）

1、常用布局的對比

使用下來其他組件大致還算方便，但是相對布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設(shè)置互相之間的位置依賴關(guān)系。

而Flutter的Stack組件內(nèi)部的Children只能通過外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復(fù)雜的堆疊布局需要通過外層包裹 Positioned 組件后設(shè)置固定的 top 和 left 距離以達到效果，內(nèi)部子組件之間無法設(shè)置位置關(guān)聯(lián)關(guān)系。

2、一些常用屬性設(shè)置上的差異：

Margin外邊距

Android：直接在布局文件對View設(shè)置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設(shè)置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設(shè)置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設(shè)置具體的值

組件的可見性

Android：每個view都可以通過setVisibility來設(shè)置可見、隱藏或者隱藏但占位

Flutter：沒有單獨設(shè)置組件是否顯示的api，只能通過 bool 值控制是否添加該組件

事件監(jiān)聽

Android：常規(guī)的setOnClickListener和setOnLongClickListener設(shè)置單擊和長按事件

Flutter：在需要添加事件監(jiān)聽的組件外層嵌套 InkWell 或 GestureDetector 并設(shè)置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬物皆組件，組件繼承 WidgetsBindingObserver 并重寫 didChangeAppLifecycleState 函數(shù)進行監(jiān)聽

退回桌面依次執(zhí)行inactive 》= paused，此時界面不可見用戶不可操作，從桌面重新進入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類的

Flutter與原生通信概述

flutter與原生通信主要有三種方式：MethodChannel、EventChannel、BasicMessageChannel，這三種方式均各有適用的場景：MethodChannel用于native與flutter的方法調(diào)用，EventChannel用于native單向的向flutter發(fā)送廣播消息，BasicMessageChannel用于native與flutter之間的消息互發(fā)。

MethodChannel用于雙方之間的方法互調(diào)，使用步驟是：

1.創(chuàng)建一個MethodChannel對象，傳入MethodChannel名稱。

2.使用setMethodHandle對對方調(diào)用自己的方法進行監(jiān)聽，通過回調(diào)中的MethodCall對象方法名判斷、獲取方法參數(shù)，并且返回調(diào)用結(jié)果。

3.使用invokeMethod來調(diào)用對方的方法，可傳入方法名，方法參數(shù)，以及監(jiān)聽對方的回調(diào)結(jié)果。

以下是示例：

需要注意的是，MethodChannel的名稱需要雙方保持一致，否則就不是同一個MethodChannel了。另外這里的方法調(diào)用并不是像Java里面反射那樣去先找到class示例對象再解析到相應(yīng)的方法，而是將雙方互發(fā)的消息包裝成了MethodCall對象，拿到這個對象后通過MethodCall里面的方法名去判斷要做什么操作，并不是直接就調(diào)用了自身（native或flutter）相對應(yīng)的方法。具體要做什么操作、調(diào)用什么方法還是得自己去調(diào)用和實現(xiàn)。

EventChannel適用于native向flutter發(fā)送廣播消息，只是單向的消息發(fā)送，native發(fā)，flutter收，返過來flutter并不能向native發(fā)送消息。例如native可將定位數(shù)據(jù)不斷的報給flutter，或者錄像數(shù)據(jù)等等，所有基于原生能力產(chǎn)生的數(shù)據(jù)都可以通過EventChannel進行發(fā)送。

步驟：

1.創(chuàng)建一個EventChannel對象，傳入EventChannel名稱。

2.flutter端調(diào)用receiveBroadcastStream進行廣播消息注冊，傳入arguments參數(shù)即為廣播名稱，此參數(shù)是告訴native端你要接受的廣播類型，判別是什么廣播發(fā)送的數(shù)據(jù)。

2.native調(diào)用setStreamHandler方法進行廣播消息監(jiān)聽，onListen回調(diào)里會有一個arguments參數(shù)，這里及為flutter注冊的廣播類型，若flutter端沒有注冊，則native端不會收到這個回調(diào)，也就無法進行消息發(fā)送。收到flutter端的廣播注冊后，根據(jù)arguments可判斷廣播類型，然后根據(jù)EventChannel.EventSink來進行消息發(fā)送，EventSink.success()即可將消息發(fā)送給flutter端。

3.flutter進行廣播注冊會返回一個streamSubscription類型的對象，該對象可以進行消息的停止，native可在onCancel回調(diào)里面收到。

示例如下：

BasicMessageChannel就是比較常用的消息互發(fā)，使用步驟如下：

1.創(chuàng)建BasicMessageChannel對象，傳入BasicMessageChannel名稱。還需傳入編解碼方式（可以自己實現(xiàn)），系統(tǒng)提供了一些列的編解碼方式，后續(xù)會介紹到。

2.使用setMessageHandler方法進行消息監(jiān)聽，也可進行回復(fù)。

3.使用send方法進行消息發(fā)送。

無論哪種方式的消息傳遞，最終都是將自定義數(shù)據(jù)轉(zhuǎn)化為二進制數(shù)據(jù)進行傳遞，flutter提供的編解碼方式分為MethodCodec和MessageCodec兩種，EventChannel和MethodChannel使用的就是MethodCodec，BasicMessageChannel使用的是MessageCodec。MethodCodec其實就是在MessageCodec的基礎(chǔ)上將數(shù)據(jù)包裝了一下，使其轉(zhuǎn)化為MethodCall對象方便使用。

MethodCodec源碼：

MethodCodec提供了兩種方式：JSONMethodCodec和StandardMethodCodec，前一種就是JSON和MethodCall對象之間的互轉(zhuǎn)，后一種則是根據(jù)傳入的數(shù)據(jù)基本類型（String，Integer等）來進行互轉(zhuǎn)。

MessageCodec則提供了四種方式，如下圖，具體就不詳細講述了，看看名字就知道是怎么回事，可以直接去看源碼。最常用和默認(rèn)的就是StandardMessageCodec方式。

從上面的使用方式可以看出，每一種Channel在創(chuàng)建的時候都需要傳遞一個BinaryMessenger，這個接口可以在FlutterEngine里面拿到，因此需要在FlutterActivity里面實現(xiàn)configFlutterEngine方法里面重寫這個方法。FlutterActivity在attach FlutterEngine之后就會調(diào)用這個configFlutterEngine方法，通過flutterEngine.getPlugins().add(FlutterPlugin)方法可以FlutterPlugin的回調(diào)方法里進行數(shù)據(jù)的初始化和銷毀工作。如下圖

這個回調(diào)方法里的FlutterPluginBinding提供了一些我們可能會用到的對象，如下：

Flutter開發(fā)App和原生iOS開發(fā)App各有什么優(yōu)缺點？

自己寫flutter也有段時間了,這次來聊聊flutter開發(fā)App和原生iOS開發(fā)App各有什么優(yōu)缺點.

不廢話,直奔主題????

為什么Flutter開發(fā)APP性能最接近原生，前端程序員請關(guān)注

Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計算機編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在：

Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。

3、Flutter Engine虛擬機

Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當(dāng)前配置和狀態(tài)描述了它們的視圖。 當(dāng)窗口小部件的狀態(tài)發(fā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改?？梢灾苯釉贠S平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調(diào)用起來更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術(shù)，會在APP安裝時就編譯成機器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架，未來也會是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問題就是需要學(xué)習(xí)一門新的語言：Dart，而有Java或者C#語言基礎(chǔ)的程序員會比較容易學(xué)習(xí)。