回到前臺(tái)黑屏引發(fā)對(duì)Flutter項(xiàng)目生命周期與安卓原生生命周期的思考

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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),月湖企業(yè)網(wǎng)站建設(shè),月湖品牌網(wǎng)站建設(shè),網(wǎng)站定制,月湖網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,月湖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

flutter 添加生命周期方法

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

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

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

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

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

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

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

1、沒有橋接層

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

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

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

2、編譯執(zhí)行

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

3、Flutter Engine虛擬機(jī)

Flutter是依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進(jìn)行交互，所以具有輸入低延遲和UI渲染高幀速率的特點(diǎn)。除了這特點(diǎn)之外，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ā)生更改時(shí)，窗口小部件會(huì)重建其描述，框架將根據(jù)前面的描述進(jìn)行區(qū)分，以確定底層呈現(xiàn)樹從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。可以直接在OS平臺(tái)提供的畫布上進(jìn)行描繪，也就是一些核心類庫直接放到虛擬機(jī)里面，調(diào)用起來更快。

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

4、自帶渲染引擎

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

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

flutter和Android原生頁面交互

參考:點(diǎn)擊跳轉(zhuǎn)

這種方式原生傳參flutter參照:

通過路由來跳轉(zhuǎn)，需要先聲明路由。MeterialApp中聲明路由：

Flutter（六）Android與Flutter混合開發(fā)（Hybird）

如果我們目前的項(xiàng)目是Android的，但是接下來我們希望部分頁面可以使用Flutter進(jìn)行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們?cè)撊绾螌?shí)現(xiàn)呢？

假設(shè)你現(xiàn)在Android項(xiàng)目的目錄的結(jié)構(gòu)是這樣的

這時(shí)候如果你想創(chuàng)建一個(gè)Flutter模塊，使得Android模塊和Flutter模塊之間可以進(jìn)行交互，我們可以通過Android Studio新建一個(gè)Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為

也就是說，最終你的項(xiàng)目結(jié)構(gòu)會(huì)是這樣的

接下來在Android Module的 build.gradle 文件中添加flutter依賴

先創(chuàng)建一個(gè)Flutter頁面

這里比較重要的是 window.defaultRouteName 這個(gè)字段，這個(gè)字段可以接收從Native傳遞過來的參數(shù) （下文我們會(huì)介紹原生傳遞參數(shù)的方法），也就是說通過這個(gè)字段我們就可以進(jìn)行Flutter頁面的路由的分發(fā)

我們可以直接在Android的 MainActivity 中啟動(dòng)一個(gè) FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對(duì)應(yīng)Flutter層的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注冊(cè) FlutterActivity

自己創(chuàng)建一個(gè) FlutterAppActivity 繼承自 FlutterActivity

在 MainActivity 中啟動(dòng) FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊(cè) FlutterAppActivity ）

兩種啟動(dòng)方式的區(qū)別

如果單純只是想打開一個(gè)Flutter頁面，兩種方式實(shí)際上基本沒有太大區(qū)別，第一種方式也許還會(huì)更簡(jiǎn)單一點(diǎn)。但是，在Flutter開發(fā)中，我們往往還需要開發(fā)一些Native插件供Flutter調(diào)用，如果使用復(fù)寫 FlutterActivity 的方式更有利于我們?cè)?FlutterActivity 中注冊(cè)我們的Native插件，所以實(shí)際開發(fā)中一般推薦使用第二種方式

擴(kuò)展思考

initialRoute 從名稱上看起來是Flutter提供給我們進(jìn)行Native與Flutter交互的路由跳轉(zhuǎn)的，但是實(shí)際上他就是一個(gè)字符串，我們不僅僅可以傳遞一個(gè)路由名稱，有時(shí)候我們也可以通過這個(gè)參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進(jìn)行解析，這樣我們就可以通過這個(gè)參數(shù)做更多的事情

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中

運(yùn)行結(jié)果

上半部分是原生的TextView，下半部分是Flutter的Text組件

本節(jié)主要介紹了Native和Flutter之間的頁面跳轉(zhuǎn)，以及同一個(gè)頁面中Native與Flutter組件的組合。接下來會(huì)介紹如何編寫Android插件與Flutter進(jìn)行數(shù)據(jù)交互

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

1、常用布局的對(duì)比

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

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

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

Margin外邊距

Android：直接在布局文件對(duì)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：每個(gè)view都可以通過setVisibility來設(shè)置可見、隱藏或者隱藏但占位

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

事件監(jiān)聽

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

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

3、生命周期

Android：

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

Flutter：

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

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

標(biāo)題名稱：原生安卓和flutter,原生安卓和ios
URL地址：http://chinadenli.net/article27/dsiodjj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、域名注冊(cè)、外貿(mào)建站、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)