Flutter?Module添加到iOS項(xiàng)目示例詳解
1. 創(chuàng)建flutter module
摘要:我們實(shí)際開發(fā)開始作為混合開發(fā),可能會(huì)把一個(gè)模塊使用flutter開發(fā),之后嵌入到iOS項(xiàng)目中。比如說(shuō)我們的商城模塊使用flutter開發(fā),這樣android和iOS都可以使用。
我們通常會(huì)把iOS項(xiàng)目和 flutter module在同一目錄,我們創(chuàng)建一個(gè)商城的module
flutter create --template module mall_flutter_module
目錄結(jié)構(gòu)如下我們的flutter的module和原生工程

.ios 是隱藏目錄,可以單獨(dú)運(yùn)行Flutter module,測(cè)試此模塊的功能,iOS代碼添加到現(xiàn)有應(yīng)用程序的項(xiàng)目或插件中,而不是添加到模塊的.ios 目錄中。
由于.ios 目錄是自動(dòng)生成的,因此請(qǐng)勿對(duì)其進(jìn)行源代碼控制。在新機(jī)器上構(gòu)建模塊之前,請(qǐng)先在mall_flutter_module目錄中運(yùn)行flutter pub get來(lái)重新生成.ios 目錄,然后再使用Flutter模塊構(gòu)建iOS項(xiàng)目。
或者使用AndroidStudio創(chuàng)建Module

下面的原生工程的目錄結(jié)構(gòu)如圖

2. flutter 模塊嵌入原生應(yīng)用
flutter_module嵌入原生通常有2種方式,一種是通過(guò)Cocoapods,這種對(duì)iOS開發(fā)比較推薦, 使用CocoaPods和已安裝的Flutter SDK,該方法需要我們安裝了Flutter 環(huán)境。 我們看下podfile,這里主要是要看下你flutter的模塊的位置,自己根據(jù)實(shí)際調(diào)整flutter_application_path。
source 'https://github.com/CocoaPods/Specs.git' platform :ios, '13.0' flutter_application_path = '../../mall_flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') target 'MallExampleForIOS' do use_frameworks! install_all_flutter_pods(flutter_application_path) end
之后執(zhí)行pod install 后打開我們 workspace進(jìn)行相關(guān)交互
當(dāng)在mall_flutter_module / pubspec.yaml中更改Flutter插件的依賴性或者第一次運(yùn)行時(shí),請(qǐng)?jiān)贔lutter模塊目錄中運(yùn)行flutter pub get來(lái)刷新podhelper.rb腳本讀取的插件列表。然后,從應(yīng)用程序目錄再次運(yùn)行pod install。
podhelper.rb腳本將插件Flutter.framework和App.framework嵌入到項(xiàng)目中。
首先我們pub get后運(yùn)行下

修改后最好運(yùn)行下 flutter module,之后我們使用Xcode編譯成功后

- 手動(dòng)拖入
這個(gè)我們一般iOS開發(fā)進(jìn)入三方都知道,可以通過(guò)手動(dòng)拖入Framework進(jìn)行編譯 在Xcode中拖入 Flutter Frameworks,首先要通過(guò)命令創(chuàng)建
flutter build ios-framework --output=./Flutter/

里面包括一些三方的插件生成的Framework,之后將 frameworks 鏈接到 iOS 應(yīng)用程序。
將文件夾的frameworks拖入Build Settings > Build Phases > Link Binary With Libraries 或者脫如下圖位置

之后添加路徑
在 Build Settings -> Search Paths -> Framework Search Paths 中添加 ${PODS_ROOT}/../mall_flutter_module/Flutter/Release

這里使用cocoapods就不用手動(dòng)了,這里就不手動(dòng)展示了。
3. flutter模塊和原生通信
我們?cè)?code>main.storyboard 中添加些原生界面和元素

在flutter頁(yè)面嵌入原生iOS程序要使用flutter引擎進(jìn)行渲染,FlutterEngine是Dart, VM和flutter運(yùn)行時(shí)的host, FlutterViewController附著于FlutterEngine,作用是通信和顯示Flutter UI
import Foundation
import Flutter
import FlutterPluginRegistrant
enum Route: Int {
case none
case home
case orders
case orderCreate
case evaluates
case coupons
case addressList
}
class MallLauncher: NSObject {
let flutterEngine = FlutterEngine(name: "io.flutter", project: nil)
lazy var eventChannel = FlutterEventChannel(name: "mall.event.channel", binaryMessenger: flutterEngine.binaryMessenger)
lazy var viewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
/// 登錄參數(shù)
/// 使用的是正式環(huán)境!
var loginInfo = [
"host": 1, // app 標(biāo)識(shí), 1 口腔
"onlineStoreId": "1366573792149848066", // 網(wǎng)店 id
"tenantId": "000001", // 租戶 id
"userId": "1384433226133696514", // 商城用戶 id
"token": "test", // 商城 token
"user": [
"nickname": "xxx", // 用戶昵稱
"phone": "xxxx", // 用戶手機(jī)號(hào)
"avatar": "" // 用戶頭像
],
"baseUrl": "https://apisaastore.baiyaodajiankang.com/",
"shopId": "1366574325145223169" // 初始店鋪id
] as [String: Any]
/// 初始化方法
/// - Parameter initRoute: 初始化路由
/// - Parameter extraParameters: 額外參數(shù)
init(initRoute: Route = .home, extraParameters: Any? = nil) {
super.init()
loginInfo["initRoute"] = initRoute.rawValue // 設(shè)置初始路由
if let extraParameters = extraParameters {
loginInfo["data"] = extraParameters // 設(shè)置額外參數(shù), 如訂單信息
}
flutterEngine.run()
eventChannel.setStreamHandler(self)
GeneratedPluginRegistrant.register(with: flutterEngine)
}
}
// 交互
extension MallLauncher: FlutterStreamHandler {
func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {
events(loginInfo) // 傳遞登錄信息
return nil
}
func onCancel(withArguments arguments: Any?) -> FlutterError? {
nil
}
}
這里主要是初始化信息以及創(chuàng)建FlutterEngine,之后運(yùn)行flutterEngine.run(),之后我們跳轉(zhuǎn)flutterViewController的時(shí)候就是使用緩存
- 交互創(chuàng)建
FlutterMethodChannel
let mallLauncher = MallLauncher() lazy var mathodChannel: FlutterMethodChannel = FlutterMethodChannel(name: "mall.method.channel", binaryMessenger: mallLauncher.flutterEngine.binaryMessenger)
- 加載flutter頁(yè)面
let flutterView = mallLauncher.viewController.view! flutterView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(flutterView)
- 跳轉(zhuǎn)指定flutter頁(yè)面
launch(MallLauncher(initRoute: .evaluates, extraParameters: nil))
具體實(shí)現(xiàn)
/// 初始化方法
/// - Parameter initRoute: 初始化路由
/// - Parameter extraParameters: 額外參數(shù)
init(initRoute: Route = .home, extraParameters: Any? = nil) {
super.init()
loginInfo["initRoute"] = initRoute.rawValue // 設(shè)置初始路由
if let extraParameters = extraParameters {
loginInfo["data"] = extraParameters // 設(shè)置額外參數(shù), 如訂單信息
}
flutterEngine.run()
eventChannel.setStreamHandler(self)
GeneratedPluginRegistrant.register(with: flutterEngine)
}

跳轉(zhuǎn)的頁(yè)面都是flutter中的頁(yè)面,這樣就嵌入一個(gè)flutter到我們iOS工程了。
小結(jié)
flutter創(chuàng)建Module可以通過(guò)命令行或者AndroidStudio創(chuàng)建,我們添加module到iOS工程可以通過(guò)CocoaPods的方式pod isntall 或者手動(dòng)拖入,最后就是flutter端和原生端的交互,可以看下之前的文章 http://www.dhdzp.com/article/258981.htm
以上就是Flutter Module添加到iOS項(xiàng)目示例詳解的詳細(xì)內(nèi)容,更多關(guān)于iOS添加Flutter Module的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
ios動(dòng)態(tài)設(shè)置lbl文字標(biāo)簽的高度
本文給大家分享的是ios動(dòng)態(tài)設(shè)置lbl文字標(biāo)簽的高度寬度的方法,一共給大家匯總了3種方法,小伙伴們根據(jù)自己的項(xiàng)目需求自由選擇。2015-05-05
iOS實(shí)現(xiàn)UITableView左滑刪除復(fù)制即用功能
這篇文章主要介紹了iOS實(shí)現(xiàn)UITableView左滑刪除復(fù)制即用功能,在項(xiàng)目開發(fā)中經(jīng)常會(huì)用到這樣的需求,下面小編把實(shí)現(xiàn)代碼分享給大家,需要的朋友可以參考下2017-09-09
iOS Swift 值類型與引用類型使用區(qū)別基礎(chǔ)詳解
這篇文章主要為大家介紹了iOS Swift 值類型與引用類型使用區(qū)別基礎(chǔ)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
iOS瀑布流的簡(jiǎn)單實(shí)現(xiàn)(Swift)
這篇文章主要介紹了iOS瀑布流的簡(jiǎn)單實(shí)現(xiàn),說(shuō)到瀑布流, 或許大家都不陌生, 瀑布流的實(shí)現(xiàn)也有很多種! 本文使用兩種方法介紹,有興趣的可以了解一下。2016-11-11
iOS開發(fā)KVO實(shí)現(xiàn)細(xì)節(jié)解密
這篇文章主要為大家介紹了iOS開發(fā)KVO實(shí)現(xiàn)細(xì)節(jié)解密,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
iOS開發(fā)避免安全隱患的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于iOS開發(fā)如何避免安全隱患的知識(shí)點(diǎn)總結(jié),需要的朋友們學(xué)習(xí)下。2019-07-07
iOS如何獲取當(dāng)前日期前后N天的時(shí)間示例代碼
這篇文章主要給大家介紹了關(guān)于iOS如何獲取當(dāng)前日期前后N天的時(shí)間的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起看看吧。2017-11-11

