Flutter(四十)-Flutter和原生的通信

377 阅读1分钟

「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战

我们在介绍原生与Flutter混编的时候已经介绍了其中一种通信方式:MethodChannel;这只是其中一种;在Flutter中与原生通信的channel有三种:

  • MethodChannel:传递方法的调用
  • BasicMessageChannel:持续通讯,收到消息之后可以回复消息
  • EventChannel:数据流,持续通讯

我们在之前的文章中,已经介绍过MethodChannel的使用方式,此处不再赘述,我们主要介绍一下另外两种的使用方法;

BasicMessageChannel

我们先看一下BasicMessageChannel的构造函数:

const BasicMessageChannel(this.name, this.codec, { BinaryMessenger? binaryMessenger })
  • name:名字;
  • codec:编解码器;

我们在Flutter代码中创建一个BasicMessageChannel如下:

image.png

之后再initState()方法中接收消息:

image.png

我们将_messageChannel传递给PageOne页面:

image.png

同时,我们将之前写的PageOne页面作如下修改:

image.png

PageOne页面中接收_messageChannel对象,然后通过该对象将TextField输入内容发送给原生端;

接下来,我们在原生端也要添加响应的代码:

在原生的ViewController页面创建FlutterBasicMessageChannel

image.png

viewDidload方法中,添加监听来接收Flutter的消息:

image.png

touchesBegan方法中,给Flutter发送消息:

image.png

我们来看一下运行效果:

iShot2021-12-22 11.08.09.gif

截止到目前为止,介绍的知识基本上已经能够进行Flutter开发了!之后会介绍一些Flutter与原生混合开发时的一些自动化处理,package和plugin开发相关方面的东西;