iOS/Flutter混合开发之PlatformView配置与使用

环境:Xcode 16.3、Flutter 3.29.2、Dart 3.7.2。

使用背景:需要在flutter界面中嵌入一个iOS原生控件。

步骤:

1. iOS侧实现

1.1:PlatformView实现

Swift 复制代码
class FLNativeView: NSObject, FlutterPlatformView {
    private var _view: UIView

    // flutter侧传入参数
    private var arguments: Any?

    init(
        frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?,
        binaryMessenger messenger: FlutterBinaryMessenger?
    ) {
        _view = UIView()
        super.init()
        _view.backgroundColor = UIColor.white
        arguments = args
        createNativeView(view: _view)
    }

    func view() -> UIView {
        _view
    }

    func createNativeView(view _view: UIView) {
        let testView = UIView() // 创建需要嵌入的视图
        constrain(testView) { testView in
            testView.edges == testView.superview!.edges
        }
    }
}

1.2:FlutterPlatformViewFactory实现

Swift 复制代码
public class FLNativeViewFactory: NSObject, FlutterPlatformViewFactory {
    private var messenger: FlutterBinaryMessenger

    public init(messenger: FlutterBinaryMessenger) {
        self.messenger = messenger
        super.init()
    }

    public func create(
        withFrame frame: CGRect,
        viewIdentifier viewId: Int64,
        arguments args: Any?
    ) -> FlutterPlatformView {
        FLNativeView(
            frame: frame,
            viewIdentifier: viewId,
            arguments: args,
            binaryMessenger: messenger
        )
    }

    public func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        FlutterStandardMessageCodec.sharedInstance()  // 用于参数编解码
    }
}

1.3:FlutterPlugin实现

Swift 复制代码
public class NativeWebViewPlugin: NSObject, FlutterPlugin {
    static let viewId = "platform-view-test"

    public static func register(with registrar: FlutterPluginRegistrar) {
        let factory = FLNativeViewFactory(messenger: registrar.messenger())
        registrar.register(factory, withId: NativeWebViewPlugin.viewId) // 唯一标识符
    }
}

1.4:注册FlutterPlugin(可使用引擎注册、或在FlutterViewController中注册,具体方式结合flutter集成方式和使用场景,这里采用后者)

在目标flutter控制器(需要嵌入原生组件、且继承自FlutterViewController的控制器)中执行注册方法:

Swift 复制代码
    func registrarPlugin() {
        if !hasPlugin("NativeWebViewPlugin") {
            let registry = registrar(forPlugin: "NativeWebViewPlugin")
            registry?.register(
                FLNativeViewFactory(messenger: binaryMessenger),
                withId: NativeWebViewPlugin.viewId
            )
        }
    }

2. flutter侧实现

Dart 复制代码
UiKitView(
   viewType: "platform-view-test",
   layoutDirection: TextDirection.ltr,
   creationParams: {'key': 'test'},
   creationParamsCodec: const StandardMessageCodec(),
);
相关推荐
yulingqin1 小时前
直接运行llamafile格式模型
swift
羑悻的小杀马特7 小时前
iOS:重新定义移动交互,引领智能生活新潮流
macos·ios·objective-c·cocoa·mac
I烟雨云渊T8 小时前
iOS热更新技术要点与风险分析
ios
Digitally8 小时前
如何解决Move to iOS 不起作用的问题?
macos·ios·cocoa
安和昂16 小时前
iOS 内存分区
macos·ios·cocoa
Unlimitedz16 小时前
iOS解码实现
ios
安和昂1 天前
iOS 工厂模式
ios
程序猿阿伟1 天前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水1 天前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
周胡杰1 天前
组件导航 (Navigation)+flutter项目搭建-混合开发+分栏
数码相机·flutter·华为·电脑·harmonyos·鸿蒙