美文网首页iOSflutteriOS 进阶
Flutter 与 原生代码 的相互调用

Flutter 与 原生代码 的相互调用

作者: 郑海鹏 | 来源:发表于2020-10-18 16:55 被阅读0次

    目录:

    1. 关于 Flutter 的 Channel
    2. Flutter 调用 原生代码
      2.1 Android 端的实现
      2.2 iOS 端的实现
      2.3 Flutter 端的调用
    3. 原生代码 调用 Flutter
      3.1 Flutter 端的实现
      3.2 Android 和 iOS 端的调用

    1. 关于 Flutter 的 Channel

    Flutter 提供了 3 种 Channel 用于 Flutter 与 原生代码做交互,分别是:

    类型 用途
    MethodChannel 用于 Flutter 与 原生平台之间函数的互相调用
    BasicMessageChannel 它传递的是字节数组,使用时自定义编解码器
    EventChannel 用于 Flutter 与 原生平台之间事件的通信

    我们可以借助 MethodChannel 实现 Flutter 与原生代码的相互调用。


    2. 如何在 Flutter 中调用原生代码

    在 Flutter 中调用原生代码,需要在原生代码中创建一个 MethodChannel,并对这个 channel 对象设置 MethodCallHandler 即可。
    每个 channel 都可以处理多个方法的调用,在 handler 对象中根据方法名做分发即可。

    2.1 在 Android 端的实现 MethodChannel

    Android 端需要在恰当的时机获取到 FlutterEngine 对象,例如在 FlutterActivityconfigureFlutterEngine 方法中获取。
    接着再创建 MethodChannel 通道实例,最后对通道设置 MethodCallHandler 即可:

    import io.flutter.embedding.android.FlutterActivity
    import io.flutter.embedding.engine.FlutterEngine
    import io.flutter.plugin.common.MethodChannel
    
    class MainActivity: FlutterActivity() {
    
        /* ======================================================= */
        /* Override/Implements Methods                             */
        /* ======================================================= */
    
        override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
            super.configureFlutterEngine(flutterEngine)
    
            val messenger = flutterEngine.dartExecutor.binaryMessenger
    
            // 新建一个 Channel 对象
            val channel = MethodChannel(messenger, "your_channel_name")
    
            // 为 channel 设置回调
            channel.setMethodCallHandler { call, res ->
                // 根据方法名,分发不同的处理
                when(call.method) {
    
                    "your_method_name" -> {
                        // 获取传入的参数
                        val msg = call.argument<String>("msg")
                        Log.i("ZHP", "正在执行原生方法,传入的参数是:「$msg」")
                        // 通知执行成功
                        res.success("这是执行的结果")
                    }
    
                    else -> {
                        // 如果有未识别的方法名,通知执行失败
                        res.error("error_code", "error_message", null)
                    }
                }
            }
        }
    
    }
    
    

    2.2 在 iOS 端的实现 MethodChannel

    iOS 端创建 MethodChannel 的方式和 Android 类似。 不过在 MethodCallHandler 中获取传入的参数和 Android 有差别,并且 FlutterResult 不支持像 Android 那样标记为 success/error :

    class MainViewController: FlutterViewController {
    
    
        /* ======================================================= */
        /* Override/Implements Methods                             */
        /* ======================================================= */
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // 注册渠道
            let channel = FlutterMethodChannel(name: "your_channel_name", binaryMessenger: self.binaryMessenger)
            channel.setMethodCallHandler { (call, res) in
                // 根据函数名做不同的处理
                switch(call.method) {
                    case "your_method_name":
                        yourMethodName(call, res)
                    default:
                        res(nil)
                }
            }
        }
        
        
        
        /* ======================================================= */
        /* Private Methods                                         */
        /* ======================================================= */
        
        private func yourMethodName(call: FlutterMethodCall, result: FlutterResult ) {
            // 获取传入的参数字典
            let params = call.arguments as? NSDictionary
            var msg = ""
            if (params != nil) {
                // 获取具体的参数值
                msg = params!["msg"] as? String ?? ""
            }
            // 打印日志
            print("正在执行原生方法,传入的参数是:" + msg)
            // 通知结束
            result(nil)
        }
    }
    

    2.3 Dart 端的调用

    最后我们在 Dart 中调用原生代码中的函数,通过建立一个名称相同的 channel,调用 channel 的 invokeMethod 即可:

    // 创建渠道
    const channel = const MethodChannel("your_channel_name");
    
    void callNativeMethod(String msg) {
        try {
          // 通过渠道,调用原生代码代码的方法
          Future future = channel.invokeMethod("your_method_name", {"msg": msg} );
          // 打印执行的结果
          print(future.toString());
        } on PlatformException catch(e) {
          print(e.toString());
        }
    }
    

    3. 如何在原生代码中调用 Flutter 中的方法

    有些时候,例如原生组件需要回调到 Flutter 中,需要在原生代码中调用 Flutter 的函数。方法还是通过建立 Channel 对象,为 channel 设置 MethodCallHandler,再在原生代码中通过同名 channel 的 invokeMethod 调用即可。

    3.1 在 Flutter 中创建 channel 并实现 MethodCallHandler

    void _initChannel() {
        var channel = MethodChannel("your_channel_name");
        channel.setMethodCallHandler((call) {
            // 同样也是根据方法名分发不同的函数
            switch(call.method) {
              case "your_method_name": {
                String msg = call.arguments["msg"];
                print("Native 调用 Flutter 成功,参数是:$msg");
                return "成功";
              }
            }
            return null;
        });
    }
    

    3.2 在 Android 和 iOS 端调用 Flutter 的方法

    通过创建同名 channel,并执行 invokeMethod 方法,即可在原生代码中调用 Flutter 的方法了:

    Android:

    import io.flutter.embedding.android.FlutterActivity
    import io.flutter.embedding.engine.FlutterEngine
    import io.flutter.plugin.common.MethodChannel
    
    class MainActivity: FlutterActivity() {
    
        /* ======================================================= */
        /* Override/Implements Methods                             */
        /* ======================================================= */
    
        override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
            super.configureFlutterEngine(flutterEngine)
    
            val messenger = flutterEngine.dartExecutor.binaryMessenger
    
            // 新建一个 Channel 对象
            val channel = MethodChannel(messenger, "your_channel_name")
    
            // 调用 Flutter 中的方法
            val params = mapOf(
                "msg" to "这是来自 Android 端的参数"
            )
            channel.invokeMethod("your_method_name", params)
        }
    
    }
    
    

    iOS:

    class MainViewController: FlutterViewController {
    
    
        /* ======================================================= */
        /* Override/Implements Methods                             */
        /* ======================================================= */
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // 创建渠道
            let channel = FlutterMethodChannel(name: "your_channel_name", binaryMessenger: self.binaryMessenger)
            
            // 通过渠道调用 Flutter 的方法
            var params: Dictionary<String, String> = ["msg": "这是来自 iOS 端的参数"]
            channel.invokeMethod("your_method_name", arguments: params)
        }
    }
    

    好了,这就是 Flutter 与原生 Android、iOS 互相调用函数的方式啦。

    相关文章

      网友评论

        本文标题:Flutter 与 原生代码 的相互调用

        本文链接:https://www.haomeiwen.com/subject/msycmktx.html