Flutter Module添加到iOS项目示例详解_苹果IOS

1. 创建flutter module

摘要：我们实际开发开始作为混合开发，可能会把一个模块使用flutter开发，之后嵌入到ios项目中。比如说我们的商城模块使用flutter开发，这样android和ios都可以使用。

我们通常会把ios项目和 flutter module在同一目录，我们创建一个商城的module

flutter create --template module mall_flutter_module

目录结构如下我们的flutter的module和原生工程

.ios 是隐藏目录，可以单独运行flutter module，测试此模块的功能，ios代码添加到现有应用程序的项目或插件中，而不是添加到模块的.ios 目录中。

由于.ios 目录是自动生成的，因此请勿对其进行源代码控制。在新机器上构建模块之前，请先在mall_flutter_module目录中运行flutter pub get来重新生成.ios 目录，然后再使用flutter模块构建ios项目。

或者使用androidstudio创建module

下面的原生工程的目录结构如图

2. flutter 模块嵌入原生应用

flutter_module嵌入原生通常有2种方式，一种是通过cocoapods，这种对ios开发比较推荐，使用cocoapods和已安装的flutter sdk，该方法需要我们安装了flutter 环境。我们看下podfile，这里主要是要看下你flutter的模块的位置，自己根据实际调整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

之后执行pod install 后打开我们 workspace进行相关交互

当在mall_flutter_module / pubspec.yaml中更改flutter插件的依赖性或者第一次运行时，请在flutter模块目录中运行flutter pub get来刷新podhelper.rb脚本读取的插件列表。然后，从应用程序目录再次运行pod install。

podhelper.rb脚本将插件flutter.framework和app.framework嵌入到项目中。

首先我们pub get后运行下

修改后最好运行下 flutter module，之后我们使用xcode编译成功后

手动拖入

这个我们一般ios开发进入三方都知道，可以通过手动拖入framework进行编译在xcode中拖入 flutter frameworks，首先要通过命令创建

flutter build ios-framework --output=./flutter/

里面包括一些三方的插件生成的framework，之后将 frameworks 链接到 ios 应用程序。

将文件夹的frameworks拖入build settings > build phases > link binary with libraries 或者脱如下图位置

之后添加路径

在 build settings -> search paths -> framework search paths 中添加 ${pods_root}/../mall_flutter_module/flutter/release

这里使用cocoapods就不用手动了，这里就不手动展示了。

3. flutter模块和原生通信

我们在main.storyboard 中添加些原生界面和元素

在flutter页面嵌入原生ios程序要使用flutter引擎进行渲染，flutterengine是dart， vm和flutter运行时的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)
    /// 登录参数
    /// 使用的是正式环境!
    var logininfo = [
        "host": 1, // app 标识, 1 口腔
        "onlinestoreid": "1366573792149848066", // 网店 id
        "tenantid": "000001", // 租户 id
        "userid": "1384433226133696514", // 商城用户 id
        "token": "test", // 商城 token
        "user": [
            "nickname": "xxx", // 用户昵称
            "phone": "xxxx", // 用户手机号
            "avatar": "" // 用户头像
        ],
        "baseurl": "https://apisaastore.baiyaodajiankang.com/",
        "shopid": "1366574325145223169" // 初始店铺id
    ] as [string: any]
    /// 初始化方法
    /// - parameter initroute: 初始化路由
    /// - parameter extraparameters: 额外参数
    init(initroute: route = .home, extraparameters: any? = nil) {
        super.init()
        logininfo["initroute"] = initroute.rawvalue // 设置初始路由
        if let extraparameters = extraparameters {
            logininfo["data"] = extraparameters // 设置额外参数, 如订单信息
        }
        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
    }
}

这里主要是初始化信息以及创建flutterengine，之后运行flutterengine.run()，之后我们跳转flutterviewcontroller的时候就是使用缓存

交互创建fluttermethodchannel

let malllauncher = malllauncher()
lazy var mathodchannel: fluttermethodchannel = fluttermethodchannel(name: "mall.method.channel", binarymessenger: malllauncher.flutterengine.binarymessenger)

加载flutter页面

let flutterview = malllauncher.viewcontroller.view!
flutterview.translatesautoresizingmaskintoconstraints = false
view.addsubview(flutterview)

跳转指定flutter页面

launch(malllauncher(initroute: .evaluates, extraparameters: nil))

具体实现

/// 初始化方法
    /// - parameter initroute: 初始化路由
    /// - parameter extraparameters: 额外参数
    init(initroute: route = .home, extraparameters: any? = nil) {
        super.init()
        logininfo["initroute"] = initroute.rawvalue // 设置初始路由
        if let extraparameters = extraparameters {
            logininfo["data"] = extraparameters // 设置额外参数, 如订单信息
        }
        flutterengine.run()
        eventchannel.setstreamhandler(self)
        generatedpluginregistrant.register(with: flutterengine)
    }