Flutter 与 原生代码 的相互调用

目录:

  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 互相调用函数的方式啦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342