Flutter 与原生交互

Flutter 与原生有四种消息传递的方案:

(1)MethodChannel:用于传递方法调用。

(2)EventChannel:用于数据流的通信;用于 flutter 和平台端进行事件监听、取消等。

(3)BasicMessageChannel:用于传递字符串和半结构化的信息;用于 flutter 和平台端进行消息数据交换时。

(4)路由传递的方式:初始化 FlutterEngine 可以传递一个路由字符串,在路由中可以拼接参数。

这里主要介绍一下 BasicMessageChannel 的使用,目前壁纸项目中使用的就是 BasicMessageChannel

原生和 Flutter 端约定通信 channel 名称为 flutter_message_handler,两端传递消息格式使用 json String

下面是两端相互调用的参数约定:

原生 => Flutter

请求参数:

参数名 参数类型 参数说明
method Sring 方法名称(通过不同的方法名来区分不同的交互)
content Sring 附带参数(json String)

回调参数:(大部分交互可不关心回调)

参数名 参数类型 参数说明
code Sring 执行错误码,1 代表成功
content Sring 附带参数(json String)
message Sring 回调信息文言

Flutter => 原生

请求参数:

参数名 参数类型 参数说明
method Sring 方法名称(通过不同的方法名来区分不同的交互)
content Sring 附带参数(json String)

回调参数:(大部分交互可不关心回调)

参数名 参数类型 参数说明
code Sring 执行错误码,1 代表成功
content Sring 附带参数(json String)
message Sring 回调信息文言

android 代码:

android 端创建 BasicMessageChannel 需要传递 3 个参数。第 1 个是 BinaryMessenger 接口,代表消息信使,是消息发送与接收的工具;第 2 个参数是 name,表示 Channel 的名称,定义了 final 类型保证唯一,第 3 个参数是 MessageCodec,表示编码方式,默认是 UTF8 编码。

    private fun setupFlutter() {
        flutterEngine = FlutterEngine(this)
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )
        FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine)

        val flutterActivity = FlutterActivity
            .withCachedEngine("my_engine_id").build(this)
        val messageChannel = BasicMessageChannel(flutterEngine.dartExecutor.binaryMessenger, "flutter_message_handler", StringCodec.INSTANCE)

        // 接收消息
        messageChannel.setMessageHandler { message, reply -> handleMessage(message, reply) }
        // 发送消息
        messageChannel.send("xxxx")
    }

    private fun handleMessage(message: String?, replay:  BasicMessageChannel.Reply<String>) {
        println(message)
    }

iOS 代码:

iOS 端创建 FlutterBasicMessageChannel 需要传两个参数,一个是 channelname,另一个 binaryMessenger 是代表消息信使,是消息发送与接收的工具;

    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];    
    [self.flutterEngine runWithEntrypoint:nil];
    // 该方法要放到 runWithEntrypoint 之后
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
    _flutterVC = [[KWFlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
    // Channel 初始化,channel 名称为 flutter_message_handler
    _messageChannel =
    [FlutterBasicMessageChannel messageChannelWithName:@"flutter_message_handler"
                                       binaryMessenger:_flutterVC];
    
    // 接收消息监听
    [_messageChannel setMessageHandler:^(id message, FlutterReply callback) {
        
    }];

    // 发送消息
    [_messageChannel sendMessage:@{@"method": @"onResume"} reply:^(id  _Nullable reply) {
        
    }];

Flutter 端代码:

// 创建 BasicMessageChannel 实例,设置 channel 名字为 flutter_message_handler,与原生设置的一致;
static const BasicMessageChannel messageChannel = const BasicMessageChannel('flutter_message_handler', StandardMessageCodec());

// 接收消息
messageChannel.setMessageHandler((message) async {
    Map<String, String> response = {};
    response["code"] = "1";
    response["content"] = "";
    response["message"] = "flutter 接收到数据";
    // 给原生回调
    return response;
});

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

推荐阅读更多精彩内容