Flutter 和 iOS混合开发交互传参

原理是通过 Flutter 的 FlutterMethodChannel 建立交互通道，具体实现如下：

App 端

1. 注册 FlutterMethodChannel

FlutterMethodChannel *methodChannel  = [FlutterMethodChannel methodChannelWithName:@"com.example/my_channel" binaryMessenger:flutter ];

其中 methodChannelWithName 参数要确保是唯一标识

2. app 端调用Flutter 方法

 [methodChannel invokeMethod:@"getNativeData" arguments:@[@"Hello from iOS"] result:^(id  _Nullable result){
            
            NSLog(@"Received result from Flutter: %@", result);
            
        }];

其中 invokeMethod:@"getNativeData" 是要调用的Flutter 端的方法名
arguments:@[@"Hello from iOS"] 是要传过去的参数，可以是字典、数组等类型。需要注意的是，要和Flutter端接收的数据类型一致

特别要注意的点是：此处的调用时机，必须要等Flutter界面加载完成后此调用才能生效，否则无反应

3. app 端监听flutter发送过来的消息

  //监听flutter发送过来的消息
    [methodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        
        //接收到flutter传递过来的消息
            //可以看到 call 有 method 和 arguments两个参数，分别为方法名，参数
            NSLog(@"ios回调 %@ -- %@", call.method, call.arguments);
            //如果交互过程出现了问题，可以调用 result 回调，将内容回调给 flutter端
        
        if ([call.method isEqualToString:@"getDataFromFlutter"]) {
                  NSArray* data = call.arguments;
                  NSLog(@"Received data from Flutter: %@", data);
                  result(@"Received your message");
              } else {
                  result(FlutterMethodNotImplemented);
              }
    }];

4.App端完整代码示例：

截圖 2024-10-11 11.23.37.png

Flutter 端

1.注册 MethodChannel

在创建的iOS 和 Flutter 交互类里注册Channel 通道，此处注意和iOS 原生端注册标识保持一致

static const platform = MethodChannel('com.example/my_channel');

2.调用 `invokeMethod`方法，主动和App端交互

final String result =  await platform.invokeMethod('getDataFromFlutter', ['Hello from Flutter']);//'getDataFromFlutter' 是App端方法名， ['Hello from Flutter']是传过去参数数据
//final String result 是App端返回的回调数据

3.监听App端的调用交互，使用`setMethodCallHandler`

  void setMethodCallHandler(Function(dynamic) handler) {
    platform.setMethodCallHandler((MethodCall call) async {
      handler(call);
    });
  }

完整代码示例参考：

17286181477831.png

截圖 2024-10-11 11.59.49.png

最终运行效果：

IMG_3CEA37439530-1.jpeg