【Flutter 混合开发】与原生通信-BasicMessageChannel

【Flutter 混合开发】与原生通信-BasicMessageChannel,第1张

概述Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生

Flutter 混合开发系列 包含如下:

嵌入原生VIEw-AndroID嵌入原生VIEw-iOS与原生通信-MethodChannel与原生通信-BasicmessageChannel与原生通信-EventChannel添加 Flutter 到 AndroID Activity添加 Flutter 到 AndroID Fragment添加 Flutter 到 iOS

每个工作日分享一篇,欢迎关注、点赞及转发。

平台通信的3中方式

Flutter 与 Native 端通信有如下3个方法:

MethodChannel:Flutter 与 Native 端相互调用,调用后可以返回结果,可以 Native 端主动调用,也可以Flutter主动调用,属于双向通信。此方式为最常用的方式, Native 端调用需要在主线程中执行。BasicmessageChannel:用于使用指定的编解码器对消息进行编码和解码,属于双向通信,可以 Native 端主动调用,也可以Flutter主动调用。EventChannel:用于数据流(event streams)的通信, Native 端主动发送数据给 Flutter,通常用于状态的监听,比如网络变化、传感器数据等。Flutter 端

Flutter 端创建 MethodChannel 通道,用于与原生端通信:

var channel = BasicmessageChannel('com.Flutter.guIDe.BasicmessageChannel',StandardMessageCodec());

com.Flutter.guIDe.BasicmessageChannel 是 BasicmessageChannel 的名称,原生端要与之对应。

发送消息:

var result = await channel.send({'name': 'laomeng','age': 18});
参数类型任意,多个参数通常使用Map。返回 Future,原生端返回的数据。

完整代码:

class BasicmessageChannelDemo extends StatefulWidget {  @overrIDe  _BasicmessageChannelDemoState createState() => _BasicmessageChannelDemoState();}class _BasicmessageChannelDemoState extends State<BasicmessageChannelDemo> {  var channel = BasicmessageChannel('com.Flutter.guIDe.BasicmessageChannel',StandardMessageCodec());  var _data;  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(),body: Column(        children: [          SizedBox(            height: 50,),Raisedbutton(            child: Text('发送数据到原生'),onpressed: () async {              var result = await channel.send({'name': 'laomeng','age': 18});              var name = result['name'];              var age = result['age'];              setState(() {                _data = '$name,$age';              });            },Text('原生返回数据:$_data'),],);  }}
AndroID 端

androID 下创建 BasicmessageChannelDemo:

class BasicmessageChannelDemo(messenger: BinaryMessenger) : BasicmessageChannel.MessageHandler<Any> {    private var channel: BasicmessageChannel<Any>    init {        channel = BasicmessageChannel(messenger,"com.Flutter.guIDe.BasicmessageChannel",StandardMessageCodec())        channel.setMessageHandler(this)    }    overrIDe fun onMessage(message: Any?,reply: BasicmessageChannel.Reply<Any>) {        val name = (message as Map<String,Any>)["name"]        val age = (message as Map<String,Any>)["age"]        var map = mapOf("name" to "hello,$name","age" to "$age"        )        reply.reply(map)    }}

onMessage 方法在 Flutter 端调用 send 方法后调用,解析方法如下:

overrIDe fun onMessage(message: Any?,"age" to "$age"        )        reply.reply(map)    }
message 是传入的参数,由于 Flutter 端传入的是 Map,所以上面的解析按照 Map 解析。reply.reply() 是返回给 Flutter 的结果。

Flutter 端解析:

var result = await channel.send({'name': 'laomeng','age': 18});var name = result['name'];var age = result['age'];

两端的解析要相互对应。

在 MainActivity 启动:

class MainActivity : FlutterActivity() {    overrIDe fun configureFlutterEngine(FlutterEngine: FlutterEngine) {        super.configureFlutterEngine(FlutterEngine)        BasicmessageChannelDemo(FlutterEngine.dartExecutor.binaryMessenger)        FlutterEngine.plugins.add(MyPlugin())    }}

iOS 端

ios 下创建 MethodChannelDemo,按如下方式:

import Flutterimport UIKitpublic class BasicmessageChannelDemo {        var channel:FlutterBasicmessageChannel        init(messenger: FlutterBinaryMessenger) {        channel = FlutterBasicmessageChannel(name: "com.Flutter.guIDe.BasicmessageChannel",binaryMessenger: messenger)        channel.setMessageHandler { (message,reply) in            if let dict = message as? Dictionary<String,Any> {                let name:String = dict["name"] as? String ?? ""                let age:Int = dict["age"] as? Int ?? -1                reply(["name":"hello,\(name)","age":age])            }        }      }  }

在 AppDelegate 启动:

import UIKitimport Flutter@UIApplicationMain@objc class AppDelegate: FlutterAppDelegate {  overrIDe func application(    _ application: UIApplication,dIDFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?  ) -> Bool {        let controller : FlutterVIEwController = window?.rootVIEwController as! FlutterVIEwController    MethodChannelDemo(messenger: controller.binaryMessenger)    BasicmessageChannelDemo(messenger: controller.binaryMessenger)    GeneratedpluginRegistrant.register(with: self)    return super.application(application,dIDFinishLaunchingWithOptions: launchOptions)  }}

原生端主动发送消息给FlutterFlutter 端接收数据
@overrIDe  voID initState() {    super.initState();    channel.setMessageHandler((message) {      setState(() {        _nativeData = message['count'];      });    });  }
AndroID 发送数据

原生端启动定时器,每隔一秒向 Flutter 发送数据,AndroID 端代码:

class BasicmessageChannelDemo(var activity: Activity,messenger: BinaryMessenger) : BasicmessageChannel.MessageHandler<Any> {    private var channel: BasicmessageChannel<Any>    private var count = 0    init {        channel = BasicmessageChannel(messenger,StandardMessageCodec())        channel.setMessageHandler(this)        startTimer()    }    fun startTimer() {        var timer = Timer().schedule(timerTask {            activity.runOnUiThread {                var map = mapOf("count" to count++)                channel.send(map,object :BasicmessageChannel.Reply<Any>{                    overrIDe fun reply(reply: Any?) {                    }                })            }        },1000)    }    overrIDe fun onMessage(message: Any?,"age" to "$age"        )        reply.reply(map)    }}

注意:AndroID 端发送数据要在主现场中调用,即:

activity.runOnUiThread {          var map = mapOf("count" to count++)          channel.invokeMethod("timer",map)      }

启动修改如下:

class MainActivity : FlutterActivity() {    overrIDe fun configureFlutterEngine(FlutterEngine: FlutterEngine) {        super.configureFlutterEngine(FlutterEngine)        BasicmessageChannelDemo(this,FlutterEngine.dartExecutor.binaryMessenger)        FlutterEngine.plugins.add(MyPlugin())    }}

iOS 发送数据

iOS 端启动定时器代码如下:

import Flutterimport UIKitpublic class BasicmessageChannelDemo {        var channel:FlutterBasicmessageChannel    var count =  0        init(messenger: FlutterBinaryMessenger) {        channel = FlutterBasicmessageChannel(name: "com.Flutter.guIDe.BasicmessageChannel","age":age])            }        }        startTimer()    }        func startTimer() {        var timer = Timer.scheduledTimer(timeInterval:1,target: self,selector:#selector(self.tickDown),userInfo:nil,repeats: true)    }    @objc func tickDown(){        count += 1        var args = ["count":count]        channel.sendMessage(args) { (reply) in                    }    }}

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

总结

以上是内存溢出为你收集整理的【Flutter 混合开发】与原生通信-BasicMessageChannel全部内容,希望文章能够帮你解决【Flutter 混合开发】与原生通信-BasicMessageChannel所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1000429.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-21
下一篇2022-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存