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

摘要:
BasicMessageChannel:用于使用指定的编解码器对消息进行编码和解码。它属于双向沟通,可以被原生方或Flutter方主动调用。Flutter端创建了一个MethodChannel通道来与原生端通信:varchannel=BasicMessageChannel;com.flatter.guide。BasicMessageChannel是BasicMessageChannel的名称,本机端应与其对应。Return Future,从本机端返回的数据。,回复:BasicMessageChannel。回复)。颤振侧分辨率:varresult=awatchchannel。邮寄varname=结果['name'];varage=结果[“age”];两端的分辨率应相互对应。

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

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)
    }
}

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

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

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)
    }
  • 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())
    }
}

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

iOS 端

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

import Flutter
import UIKit

public 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])
            }
        }  
    }  
}

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

AppDelegate 启动:

import UIKit
import 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)
  }
}

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

原生端主动发送消息给Flutter

Flutter 端接收数据
@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, "com.flutter.guide.BasicMessageChannel", 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?) {

                    }
                })
            }
        }, 0, 1000)

    }

    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)
    }
}

注意: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())
    }
}

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

iOS 发送数据

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


import Flutter
import UIKit

public class BasicMessageChannelDemo {
    
    var channel:FlutterBasicMessageChannel
    var count =  0
    
    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])
            }
        }
        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 混合开发】与原生通信-BasicMessageChannel第7张

交流

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

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

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

免责声明:文章转载自《【Flutter 混合开发】与原生通信-BasicMessageChannel》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Java--二维码生成&amp;amp;图片和流转化ShopXo框架去掉绑定商店的提示下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jqgrid 属性说明

1.0 colModel :   要呈现字段的属性设置 1.1 align:定义数据相对单元格的对齐方式.string  left 1.2 datefmt: 日期格式,     string  Y-m-d 1.3 editable: 定义字段是否可编辑 boolean  false 1.4 defval : 搜索字段的默认值,(只用于自定义搜索) stri...

C#通过SFTP协议操作文件

本文主要是C#调用SSH实现文件上传下载功能,主要是要引用第三方类库Tamir.SharpSSH.dll。 以下是SFTPHelper类,实现了对文件的操作,可供参考。 public classSFTPHelper { privateSession m_session; privateChannel m_chann...

ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到

场景 ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收: https://mp.csdn.net/console/editor/html/107979828 上面讲了怎样使用el-upload控件传递给后台进行接收。 可以看到el-upload传递额外的参数时使用的data格式为 :data="{upda...

Java经典练习题_Day03

一、选择 B D(死循环) E(switch) BC 二、编程 1、读入一个整数,表示一个人的年龄。 如果小于6岁,则输出“儿童”, 6岁到13岁,输出“少儿”; 14岁到18岁,输出“青少年”; 18岁到35岁,输出“青年”; 35岁到50岁,输出“中年”; 50 岁以上输出“中老年”。 import java.util.*; /* * 读入一个整数...

flutter vscode 安卓打包apk文件

配置 VSCode默认是没有使用密钥签名的,往往我们在正式项目中是需要签名的。那就创建好了。。。所以需要自己创建并使用密钥签名 步骤一 创建密钥库 执行以下命令: keytool -genkey -v -keystore F:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 这句命令...

打造完美的xml技术解决方案(dom4j/xstream)

转:   XML 技术是随着 Java 的发展而发展起来的。在 XML 出现之前对于简单的数据格式通常是存储在 ini 配置文件等文本文件中,复杂的格式则采用自定义的文件格式,因此对于每种文件格式都要有专门的解析程序。 XML 出现以后解决了这个问题,程序面对的是有固定格式的 XML 文件,只要通过标准 API 就可以进行 XML 文件的处理。  XML...