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

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

公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出李滄免費(fèi)做網(wǎng)站回饋大家。

假設(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ù)交互

flutter 路由監(jiān)聽友盟頁面統(tǒng)計(jì)方案

1.當(dāng)我們使用flutter開發(fā)的時(shí)候 頁面里面只有 initState 與dispose方法.

initState 只有進(jìn)入頁面的時(shí)候調(diào)用,并且在二級(jí)頁面返回的時(shí)候 是不會(huì)有調(diào)用的

dispose 當(dāng)頁面銷毀的時(shí)候 才會(huì)調(diào)用，你進(jìn)入二級(jí)頁面是不會(huì)調(diào)用的

綜上分析者兩個(gè)方法沒有辦法友盟頁面統(tǒng)計(jì)分享上報(bào)

2.我們可以使用 NavigatorObserver來解決

首先新建一個(gè) 繼承與NavigatorObserver的類 實(shí)現(xiàn)NavigatorObserver 的方法就可以了

最后我們需要再 MaterialApp里面的navigatorObservers添加監(jiān)聽就可以了

這時(shí)候 會(huì)有一個(gè)問題點(diǎn)擊tabbar幾個(gè)主頁是沒有統(tǒng)計(jì)的 ，我們也需要再tabbar的點(diǎn)擊方法來進(jìn)行處理

Flutter狀態(tài)管理--GetX的簡(jiǎn)單使用

一、前言

Flutter開發(fā)，就需要對(duì)各種狀態(tài)的管理，就是在請(qǐng)求數(shù)據(jù)的時(shí)候需要實(shí)時(shí)變化，各種交互變化等，在沒有使用GetX之前使用Provider,用Provider的時(shí)候覺得真香，挺方便的，需要刷新的時(shí)候直接 notifyListeners(); 用了GetX之后覺得Provider太繁瑣了。這邊介紹下GetX的使用以及常用的方法。

二、 GetX

GetX 是 Flutter 上的一個(gè)輕量且強(qiáng)大的解決方案：高性能的狀態(tài)管理、智能的依賴注入和便捷的路由管理。

1、相關(guān)優(yōu)勢(shì)：

三、使用

1、第一步 引入get

2、第二步

修改入口、配置路由

3、路由

Routes類

Pages類

4、狀態(tài)管理

我一般一個(gè)page對(duì)應(yīng)一個(gè)controller， controller來處理邏輯，控制page.

簡(jiǎn)單使用

5、依賴注入

依賴注入也是我喜歡的，可以減少很多工作。

第一步

第二步

6、跨頁面交互

7、黑暗模式

可以參考前期寫的博客。 黑暗模式的適配

4.Flutter生命周期與路由管理

flutter也有自己的生命周期，不像Android中Application、Activity、Fragment生命周期分得這么明細(xì)，flutter中只在StatefulWidget維護(hù)的State中維護(hù)了5個(gè)生命周期函數(shù)(可用于App中的頁面跳轉(zhuǎn)，相當(dāng)于Android中View的生命周期)。而Activity中的生命周期可以通過實(shí)現(xiàn)WidgetsBindingObserver 接口，在didChangeAppLifecycleState()中獲取狀態(tài)回調(diào)。

initState()--didChangeDependencies()--deactivate()--dispose() didUpdateWidge()

1.Widget A打開Widget B： 調(diào)用 Navigator.push(B)

2.Widget B從Widget A退出： 調(diào)用Navigator.pop()

可以看出， Flutter打開、關(guān)閉Widget時(shí)跟安卓、iOS的時(shí)序一樣， 都是先處理即將顯示的界面。

Flutter提供了WidgetsBindingObserver來監(jiān)聽AppLifecycleState， 而AppLifecycleState有4種狀態(tài)：

1、 resumed 界面可見， 同安卓的onResume。

2、inactive界面退到后臺(tái)或彈出對(duì)話框情況下， 即失去了焦點(diǎn)但仍可以執(zhí)行drawframe回調(diào)；同安卓的onPause；

3、paused應(yīng)用掛起，比如退到后臺(tái)，失去了焦點(diǎn)且不會(huì)收到 drawframe 回調(diào)；同安卓的onStop；

4、suspending， iOS中沒用，安卓里就是掛起，不會(huì)再執(zhí)行 drawframe 回調(diào)；

5、關(guān)于drawframe回調(diào)：Vsync信號(hào)到來之后，Engin會(huì)按順序回調(diào) window 的兩個(gè)回調(diào)函數(shù)： onBeginFrame() 和 onDrawFrame() 。這兩個(gè)回調(diào)是 SchedulerBinding 初始化的時(shí)候設(shè)置給 window 的。對(duì)應(yīng)的是 SchedulerBinding.handleBeginFrame() 和 SchedulerBinding.handleDrawFrame() 。

應(yīng)用場(chǎng)景：

1、初次打開widget時(shí)，不執(zhí)行AppLifecycleState的回調(diào)；

2、按home鍵或Power鍵， AppLifecycleState inactive----AppLifecycleState pause

3、從后臺(tái)到前臺(tái)：AppLifecycleState inactive---ApplifecycleState resumed

4、back鍵退出應(yīng)用： AppLifecycleState inactive---AppLifecycleState paused

Flutter框架 - GetX

GetX 是 Flutter 上的一個(gè)輕量且強(qiáng)大的解決方案：高性能的狀態(tài)管理、智能的依賴注入和便捷的路由管理。

GetX的優(yōu)勢(shì)

對(duì)比provider，GetX可能更受歡迎

下面是GetX在pub上面的likes數(shù)據(jù)

下面是GetX在github上面的star數(shù)據(jù)

GetX 因?yàn)椴恍枰舷挛?，突破了InheritedWidget的限制，我們可以在全局和模塊間共享狀態(tài)，這正是 BLoc 、Provider 等框架的短板

1、?在MaterialApp前添加 "Get"，將其變成GetMaterialApp。

2、創(chuàng)建業(yè)務(wù)邏輯類，并將所有的變量，方法和控制器放在里面。 你可以使用一個(gè)簡(jiǎn)單的".obs "使任何變量成為可觀察的。

3、引用邏輯類，在界面顯示

幾個(gè)注意點(diǎn)

1、

與

效果一樣

2、

與

效果一樣

3、

與

效果一樣

1、Obx

2、GetX

3、GetBuilder

4、ValueBuilder

;target=VSCodecategory=Programming%20LanguagessortBy=Relevance