Flutter Module添加到iOS項目示例詳解

Posted on by

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)
    }

跳轉的頁面都是flutter中的頁面，這樣就嵌入一個flutter到我們iOS工程瞭。

小結

flutter創建Module可以通過命令行或者AndroidStudio創建，我們添加module到iOS工程可以通過CocoaPods的方式pod isntall 或者手動拖入，最後就是flutter端和原生端的交互，可以看下之前的文章。

以上就是Flutter Module添加到iOS項目示例詳解的詳細內容，更多關於iOS添加Flutter Module的資料請關註WalkonNet其它相關文章！

推薦閱讀：