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

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

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、云縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為云縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

新建一個(gè)flutter項(xiàng)目，可以在ios上運(yùn)行，四步搞定！

1. 建立一個(gè)flutter項(xiàng)目的命令

2. 在ios文件夾下，生成pods文件夾

3. Xcode環(huán)境簽名設(shè)置；

把錯(cuò)誤的版本刪除再添加，可解決簽名錯(cuò)誤問題；必須先刪除再添加，直接修改可能不起作用。團(tuán)隊(duì)開發(fā)，必須使用團(tuán)隊(duì)的簽名。

4.運(yùn)行創(chuàng)建的flutter項(xiàng)目；

選擇真機(jī)、模擬機(jī)，點(diǎn)擊運(yùn)行按鈕，或使用命令運(yùn)行：

下面兩步是贈(zèng)送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 剛更新的插件和已有的插件有沖突怎么辦？

可以試一試以下步驟：

Flutter-02編譯器選擇

1.打開 VS Code。

2.打開 查看 命令面板…。

3.輸入 “install”，然后選擇 擴(kuò)展: 安裝擴(kuò)展(就是點(diǎn)擊選擇第一行內(nèi)容)。

4.在擴(kuò)展搜索輸入框中輸入 “flutter”，然后在列表中選擇 Flutter 并單擊 安裝。此過程中會(huì)自動(dòng)安裝必需的 Dart 插件。（選擇第一行并安裝）

5.退出然后重新啟動(dòng) VS Code。

1.打開 查看 命令面板…。

2.輸入 “doctor”，選擇 Flutter: Run Flutter Doctor。

3.打開 輸出 (OUTPUT) 面板查看是否有錯(cuò)誤，確保在不同的輸出選項(xiàng) (Output Options) 的下拉列表中選擇了 Flutter。

我們?cè)谏掀恼乱呀?jīng)用命令行創(chuàng)建了一個(gè) my_app 的flutter項(xiàng)目了，這里我們就可以使用 vscode 打開看看了

創(chuàng)建新項(xiàng)目 ，則是在命令面板輸 flutter , 選擇 Flutter: New Application Project

運(yùn)行項(xiàng)目 ，找到 VS Code 的狀態(tài)欄(窗口底部藍(lán)色的條)

1.打開 Android Studio。

2.打開插件設(shè)置（在 v3.6.3.0 以上的系統(tǒng)打開 Configure Plugins）。

這里需要先改一下網(wǎng)絡(luò)請(qǐng)求的設(shè)置

3.然后搜索Flutter 插件，選擇并點(diǎn)擊 安裝。

4.當(dāng)彈出安裝 Dart 插件提示時(shí)，點(diǎn)擊 Yes。

5.退出重新啟動(dòng)編譯器，然后在編譯器主頁面就可以看到多了了 create new flutter project 可供選擇，代表flutter插件安裝成功，我們?cè)囍c(diǎn)擊來創(chuàng)建一個(gè)新項(xiàng)目。

4. VS Code創(chuàng)建flutter項(xiàng)目

如果和我一樣，用慣了VS Code來開發(fā)項(xiàng)目的話，那就跟我一起來配置一下如何在VS Code里運(yùn)行flutter項(xiàng)目。

1.在VS Code里安裝擴(kuò)展：

2.在VScode上打開打開終端，快捷鍵：Ctrl+~（Tab上一個(gè)鍵），在終端上輸入：flutter create flutter_app02，即可創(chuàng)建完成！

也可以把之前的項(xiàng)目放到工作區(qū)

3.在終端中運(yùn)行命令：flutter run

運(yùn)行的時(shí)候你會(huì)發(fā)現(xiàn)手機(jī)提示你安裝個(gè)app，點(diǎn)擊安裝完成，項(xiàng)目就在手機(jī)上顯示了，下圖是運(yùn)行成功的提示。

下圖是手機(jī)效果：

如果報(bào)錯(cuò)的話，運(yùn)行下清緩存的命令：flutter clean，把文件夾.gradle刪掉，然后flutter run重新跑下項(xiàng)目。

Flutter初始化

新建一個(gè)Flutter工程，android模塊。

1，只有一個(gè)Activity組件，它是Dart層繪制Widget的容器。

2，Application配置FlutterApplication。

應(yīng)用Application配置io.flutter.app.FlutterApplication類，App首次啟動(dòng)時(shí)，初始化。

調(diào)用FlutterMain.startInitialization()方法。

initConfig方法，從AndroidManfest.xml配置的applicaion節(jié)點(diǎn)獲取meta-data數(shù)據(jù)，初始化以下默認(rèn)值。

這些值都是使用中用到的name，例如，抽取apk中asset資源時(shí)，flutter_assets打包目錄，打包產(chǎn)物data名稱。

initResources方法， 初始化資源。

在Flutter打包apk的asset目錄下，包括fluttter_asset目錄/資源項(xiàng)，將資源從apk中抽取，保存在 Context.getDir("flutter", 0) 目錄下。

/data/user/0/包名/app_flutter目錄。

在目錄中創(chuàng)建一個(gè)時(shí)間戳文件，根據(jù)apk版本和包信息記錄的lastUpdateTime更新時(shí)間，第二次啟動(dòng)時(shí)，若apk未更新，不需要再次抽取。

加載so庫，libflutter.so，System.loadLibrary()。

主頁面繼承FlutterActivity，配置啟動(dòng)模式singleTop。

FlutterActivity類在io.flutter.app包， (區(qū)別io.flutter.embedding.android包)， 組件生命周期委托給FlutterActivityDelegate類。

組件啟動(dòng)，onCreate方法。

FlutterMain.ensureInitializationComplete方法，確保資源成功抽取完成，創(chuàng)建FlutterView視圖(io.flutter.view)，繼承SurfaceView類，setContentView方法，設(shè)置組件主布局即FlutterView視圖。

最后，根據(jù)Bundle路徑，runBundle()加載運(yùn)行，

調(diào)用FlutterView的runFromBundle方法，入口點(diǎn)在dart的main方法，

通過FlutterNativeView，調(diào)用FlutterJNI的native方法。

nativeRunBundleAndSnapshotFromLibrary方法。

任重而道遠(yuǎn)

文章名稱：flutter創(chuàng)建軟件,flutter搭建
當(dāng)前網(wǎng)址：http://chinadenli.net/article3/dsgjeis.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站排名、建站公司、企業(yè)建站、軟件開發(fā)、品牌網(wǎng)站建設(shè)

廣告

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