ios flutter 混編

最近在集成flutter進(jìn)項目

金臺網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

以收集編譯產(chǎn)物并以cocopods方式集成

產(chǎn)物大概放入兩個pod庫

這個暫且叫pod1，pod1放flutter.framework，第三方plugin.a，自己寫的基礎(chǔ)plugin，比如networking，hud等等（由于是混編，不可避免存在很多原生基礎(chǔ)組件，所以能公用的基礎(chǔ)組件都會弄一個flutter-plugin橋接）

第二個pod2放編譯之后的app.framwork,注冊文件GeneratedPluginRegistrant，以及各個業(yè)務(wù)模塊.a（有可能沒有）結(jié)構(gòu)大概如下面

podspec大概如下

主工程引入這兩個pod庫即可

接下來從零開始搭建上文所說的

先創(chuàng)建一個flutter module

這個是主flutter工程，用來集成businessModule以及生成app.framework

結(jié)構(gòu)如下圖

再生成一個業(yè)務(wù)工程

注意此時還需要進(jìn)入example生成ios和Android工程，不然無法單獨編譯運(yùn)行

這樣 這個單獨的業(yè)務(wù)模塊就可以單獨跑起來了

此時主flutter工程和業(yè)務(wù)工程均搭建完畢

在主工程pubspec.ymal文件講兩個工程關(guān)聯(lián)

好了 接下來就是編寫腳本收集產(chǎn)物了

編譯完成之后會在flutter主工程product生成如下文件

將上面文件分類收集做成文章開頭的pod1，pod2 ，在native工程引入即可

在集成flutter的過程中 踩不少坑 也閱讀很多前輩的文章，在此一并感謝

做混合的話Uniapp和Flutter我應(yīng)該學(xué)哪個?。?/h2>

Uniapp目前比較成熟，而且用的是Vue語法，學(xué)習(xí)成本比較低，而且行業(yè)里面用的也比較廣泛，而Flutter的話，學(xué)習(xí)成本略高，因為要學(xué)習(xí)新的語言，還有就是目前生態(tài)不是特別完備，等他再發(fā)展發(fā)展吧。黑馬程序員官網(wǎng)有成套免費(fèi)視頻哦，有什么不懂的可以直接過去學(xué)習(xí)。您的采納是對我成長的鞭策

Flutter混合開發(fā)實戰(zhàn)

之前開發(fā)了一個純Flutter的項目，結(jié)果接到個新的需求需要使用Flutter單獨開一個模塊集成到原有的android項目中

下面分享一下如何集成現(xiàn)有的項目和如何繼承以及碰到的問題

1.首先第一步 修改gradle

因為 Flutter 當(dāng)前僅支持為 x86_64，armeabi-v7a 和 arm64-v8a 構(gòu)建預(yù)編（AOT）的庫 所以我們需要修改gradle的文件限制 APK 中支持的架構(gòu)，從而避免 libflutter.so找不到引起的崩潰

2.新建一個FlutterModel的工程

2.使用aar文件 因為所有工程統(tǒng)一使用jenkins打包所以我們放在本地肯定是不合適的

說以我們需要 打包aar并上傳服務(wù)器

上傳完成后在android中引用

在開發(fā)中遇到的問題

1.關(guān)于android和Ios中的跳轉(zhuǎn)傳參問題

這個問題在android端還是比較方便的 但是的在Ios端并不怎么好實現(xiàn)

最終決定使用flutter_boost來完成android和Ios與Flutter的通信操作

flutter_boost github地址：

集成文檔：

集成文檔給出了 但是沒有android的 尷尬

下滿分享下android的集成

（1）在flutter的 pubspec.yaml工程中添加

（2）修改android工程

使用本地工程的時候需要在工程共添加

使用aar的時候不需要添加

（3）在android工程中添加對應(yīng)的條狀路由配置

（4）在使用默認(rèn)的flutter_boost啟動界面的時候可能碰到狀態(tài)欄丟失的情況

所以最好集成BoostFlutterActivity寫一個新的activity方便處理狀態(tài)欄和activity進(jìn)出動畫

（5）跳轉(zhuǎn)并傳參

//params 傳多個參數(shù)可以使用json的形式

2.在flutter中的網(wǎng)絡(luò)框架使用的dio結(jié)果在ios的彈出loading的時候出現(xiàn)卡頓現(xiàn)象

解決方式：1.服務(wù)換證書 （但是后臺太忙暫時沒有支持的人員）

2.ios使用原生的loading解決

3.在使用dio的時候出現(xiàn)ios部分手機(jī) 網(wǎng)絡(luò)請求緩慢問題

解決方法：請求的時候使用http 2.0協(xié)議

插件地址：

「編程工具」Flutter-Native 混合解決方案 FlutterBoost

FlutterBoost 是一個Flutter 插件，它可以輕松地為現(xiàn)有原生應(yīng)用程序提供 Flutter 混合集成方案。FlutterBoost 的理念是將 Flutter 像 Webview 那樣來使用。在現(xiàn)有應(yīng)用程序中同時管理 Native 頁面和 Flutter 頁面并非易事。 FlutterBoost 幫你處理頁面的映射和跳轉(zhuǎn)，你只需關(guān)心頁面的名字和參數(shù)即可（通?？梢允?URL）。

概念

所有頁面路由請求都將發(fā)送到 Native 路由器。Native 路由器與 Native Container Manager 通信，Native Container Manager 負(fù)責(zé)構(gòu)建和銷毀 Native Containers。

使用 Flutter Boost Native Container 用 Native 代碼打開 Flutter 頁面

Android

或者用 Fragment

使用 Flutter Boost 在 dart 代碼打開頁面

Dart

使用 Flutter Boost 在 dart 代碼關(guān)閉頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

擴(kuò)展思考

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

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

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

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

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

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