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

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

成都創(chuàng)新互聯(lián)主營上海網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),上海h5成都微信小程序搭建,上海網(wǎng)站營銷推廣歡迎上海等地區(qū)企業(yè)咨詢

假設(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ì)更簡單一點(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 的Android 、iOS 打包

Flutter 項(xiàng)目雖說是跨平臺(tái)項(xiàng)目，但是項(xiàng)目的名稱還是需要在不同的平臺(tái)設(shè)置，不同平臺(tái)的設(shè)置位置是：

1、 Android 項(xiàng)目名字配置是在 android/app/src/main/AndroidManifest.xml 文件中的 application 下的 android:label 。如下圖所示:

2、 iOS 項(xiàng)目名字配置是在 ios/Runner/Info.plist 文件中的 dict 下的 keyCFBundleName/key stringtestapp/string 。如下圖所示:

Flutter 項(xiàng)目雖說是跨平臺(tái)項(xiàng)目，但是項(xiàng)目的 Logo 圖標(biāo)還是需要在不同的平臺(tái)設(shè)置，不同平臺(tái)的設(shè)置位置是：

1、 Android 項(xiàng)目 Logo 配置是在圖片放置在 android/app/src/main/res 下的對(duì)應(yīng)目錄下：

mipmap-mdpi : 48 _ 48

mipmap-hdpi : 72 _ 72

mipmap-xhdpi :96 _ 96

mipmap-xxhdpi :144 _ 144

mipmap-xxxhdpi :192 * 192。如下圖所示:

然后，在 android/app/src/main/AndroidManifest.xml 路徑下的 AndroidManifest.xml 文件中的 android:icon 。如下圖所示：

2、 iOS 項(xiàng)目 Logo 的配置是在 ios/Runner/Assets.xcassets/AppIcon.appiconset 文件下，直接更換圖片，名字不要改動(dòng) 。如下圖所示:

1、使用 cd 指令進(jìn)入項(xiàng)目（testapp）的根目錄(方便后面操作),如下圖所示：

填寫對(duì)應(yīng)的值，如下圖所示：

1、 build.gradle 文件的位置,如下圖所示:

2、在 build.gradle 中配置 key.propreties 的全局變量,

如下圖所示:

3、 build.gradle 文件中進(jìn)行簽名配置。

如下圖所示:

注意： buildTypes 中的 signingConfig signingConfigs.debug 可以變更為 signingConfig signingConfigs.release ，這樣在打包的時(shí)候，直接可以 flutter build apk ，否則就執(zhí)行 flutter build apk --release 。如圖所示：

1、 cd 進(jìn)入功能（testapp） 的根目錄，如下圖所示：

2、執(zhí)行 flutter build apk 指令，如下圖所示：

我們打包成功， 生成的 apk 包在 build/app/outputs/apk/release/app-release.apk 目錄下，如下圖所示：

1、將真機(jī)通過 USB 鏈接到電腦上，如下圖所示：

2、然后,在項(xiàng)目的根目錄執(zhí)行 flutter install , 如果出現(xiàn)電腦同時(shí)有多個(gè)設(shè)備時(shí)，就執(zhí)行 flutter install -d deviceid 。如下圖所示：

3、設(shè)備的安裝過程如下：

1、必須一個(gè) Xcode 開發(fā)工具

2、如果是 Window 的電腦，請(qǐng)安裝 Mac 虛擬系統(tǒng)，進(jìn)行安裝 Xcode .

1、打開目錄下的 Runner.xcworkspace 工程。

如下圖所示：

2、在 ios 工程中配置 Signing Capabilities , 如下圖所示：

1、進(jìn)入項(xiàng)目的根目錄

2、打包指令 flutter build ios --release

如圖所示：

3、使用 Xcode 工具進(jìn)行打包

如圖所示：

注意：進(jìn)行該步驟，必須執(zhí)行 flutter build ios --release 否則會(huì)報(bào)錯(cuò)。

打包成功，如下圖所示：

android studio導(dǎo)入flutter項(xiàng)目報(bào)錯(cuò):Dart SDK is not configured

在Android studio中導(dǎo)入flutter項(xiàng)目時(shí)報(bào)錯(cuò)：Dart SDK is not configured，這是因?yàn)樵赼ndroid studio里面沒有配置Dart SDK的問題，可以通過下面步驟進(jìn)行配置：

1.打開File =》Setting =》Language Frameworks = Dart

2.勾選 “enable Dart support for the project”，并且選擇Dart SDK path，路徑為 D:\install\android\flutter\bin\cache\dart-sdk ，其中D:\install\android\flutter是flutter SDK路徑

3. 然后點(diǎn)擊確定，重新編譯即可

網(wǎng)站欄目：安卓代碼轉(zhuǎn)flutter,安卓代碼轉(zhuǎn)蘋果代碼
文章路徑：http://aaarwkj.com/article26/dssjscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、虛擬主機(jī)、ChatGPT

廣告

聲明：本網(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)