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

如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現呢？

成都創(chuàng)新互聯-專業(yè)網站定制、快速模板網站建設、高性價比門頭溝網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式門頭溝網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋門頭溝地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

假設你現在Android項目的目錄的結構是這樣的

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

也就是說，最終你的項目結構會是這樣的

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

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

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

我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數就對應Flutter層的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注冊 FlutterActivity

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

在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）

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

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

擴展思考

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

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

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

運行結果

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

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

Flutter嵌入原生OC頁面

1、創(chuàng)建MyFlutterView繼承NSObject并遵守FlutterPlatformView協(xié)議

2、實現自定義初始化方法，并實現?FlutterPlatformView協(xié)議方法

ios原生嵌套Flutter模塊

通過以下命令解決

執(zhí)行完畢后，Flutter module將會創(chuàng)建在ios項目/my_flutter目錄下

將Flutter模塊嵌入到現有iOS應用程序中有兩種方式：

此方法需要所有的相關開發(fā)的人員安裝 Flutter 環(huán)境。

需要在my_flutter文件夾下執(zhí)行一下

把.ios和.android等flutter配置生成出來。

AppDelegate.h:

AppDelegate.m:

控制器：

flutter：

注冊路由

通過全局FlutterEngine實例化FlutterViewController，并setInitialRoute設置初始化路由，這里發(fā)現設置的初始化路由路由并不管用

控制器：

設置FlutterViewController的pushRoute

這里其實只是讓flutter方面push一次

新建一個FlutterViewController并把setInitialRoute設置為跳轉的路由，不通過全局的FlutterEngine創(chuàng)建

放一個之前自己學習時寫的demo，希望可以幫助新入門的老鐵們，有好的建議可以提一下，我們一起進步，奧利給！！！

網站題目：flutter嵌入,flutter嵌套
分享鏈接：http://chinadenli.net/article14/dseppge.html

成都網站建設公司_創(chuàng)新互聯，為您提供域名注冊、做網站、企業(yè)網站制作、App開發(fā)、品牌網站制作、搜索引擎優(yōu)化

廣告

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