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

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

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

步骤:

1. iOS侧实现

        1.1:PlatformView实现

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实现

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实现

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的控制器)中执行注册方法:

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

2. flutter侧实现

UiKitView(
   viewType: "platform-view-test",
   layoutDirection: TextDirection.ltr,
   creationParams: {'key': 'test'},
   creationParamsCodec: const StandardMessageCodec(),
);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值