如需转载,请注明出处:Flutter学习笔记(29)--Flutter如何与native进行通信
前言:在我们开发Flutter项目的时候,难免会遇到需要调用native api或者是其他的情况,这时候就需要处理Flutter与native的通信问题,一般常用的Flutter与native的通信方式有3中。
1.MethodChannel:Flutter端向native端发送通知,通常用来调用native的某一个方法。
2.EventChannel:用于数据流的通信,有监听功能,比如电量变化后直接推送给Flutter端。
3.BasicMessageChannel:用于传递字符串或半结构体的数据。
接下来具体看一下每种通信方式的使用方法!
-
MethodChannel
先来整体说一下逻辑思想吧,这样能更容易理解一些,如果想要实现Flutter与native通信,首先要建立一个通信的通道,通过一个通道标识来进行匹配,匹配上了之后Flutter端通过invokeMethod调用方法来发起一个请求,在native端通过onMethodCall进行匹配请求的key,匹配上了就处理对应case内的逻辑!!!整体来看,我感觉有点EventBus的意思呢,就像是一条事件总线。。。
第一步:实现通信插件Plugin-native端
由于一个项目中可能会需要很多Flutter与native的通信,所以我这里是将测试的插件封装到一个类里面了,然后在MainActivity里面的onCreate进行注册
package com.example.flutter_demo; import android.content.Context; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.PluginRegistry; public class TestPlugin implements MethodChannel.MethodCallHandler { public static String CHANNELNAME = "channel_name";//每一个通信通道的唯一标识,在整个项目内唯一!!! private static MethodChannel methodChannel; private Context context; public TestPlugin(Context context) { this.context = context; } public static void registerWith(PluginRegistry.Registrar registrar){ methodChannel = new MethodChannel(registrar.messenger(),CHANNELNAME); TestPlugin instance = new TestPlugin(registrar.activity()); methodChannel.setMethodCallHandler(instance); } @Override public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) { if (methodCall.method.equals("method_key")){ result.success("what is up man???"); } } }
注:CHANNELNAME-->上面说过了,由于项目内会有很多的通信,所以我们定义的Channel必须是唯一的!!!!
TestPlugin实现MethodChannel.MethodCallHandler,定义一个对外暴露的注册方法registerWith,因为我们需要在MainActivity进行注册,在registerWith方法内初始化MethodChannel
接下来我们看一下onMethodCall方法,这个方法在Flutter发起请求时被调用,方法内有两个参数,一个methodCall和一个result,我们分别来说一下这两个参数:
methodCall:其中当前请求的相关信息,比如匹配请求的key
result:用于给Flutter返回数据,有3个方法,result.success(成功调用)、result.erro(失败调用)、result.notImplemented(方法没有实现调用)
第二步:注册通信插件Plugin-native端
package com.example.flutter_demo; import android.os.Bundle; import io.flutter.app.FlutterActivity; import io.flutter.plugins.GeneratedPluginRegistrant; public class MainActivity extends FlutterActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); GeneratedPluginRegistrant.registerWith(this); TestPlugin.registerWith(this.registrarFor(TestPlugin.CHANNELNAME)); } }
注册这块我感觉作用是起到了一个桥梁的作用,通过注册将插件和Flutter内定义的CHANNEL关联了起来。
第三步:Flutter内发起通信请求-flutter端
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget{ @override StatecreateState() { // TODO: implement createState return new MyAppState(); } } class MyAppState extends State { var _textContent = 'welcome to flutter word'; Future _changeTextContent() async{ //channel_name每一个通信通道的唯一标识,在整个项目内唯一!!! const platfom = const MethodChannel('channel_name'); try { //method_key是插件TestPlugin中onMethodCall回调匹配的key String resultValue = await platfom.invokeMethod('method_key'); setState(() { _textContent = resultValue; }); }on PlatformException catch (e){ print(e.toString()); } } @override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( theme: new ThemeData( primaryColor: Colors.white, ), debugShowCheckedModeBanner: false, title: 'demo', home: new Scaffold( appBar: new AppBar( title: new Text('Demo'), leading: Icon(Icons.menu,size: 30,), actions: [ Icon(Icons.search,size: 30,) ], ), body: new Center( child: new Text(_textContent), ), floatingActionButton: new FloatingActionButton(onPressed: _changeTextContent,child: new Icon(Icons.adjust),), ), ); } }
这里的功能就是页面中央有一个text,通过点击一个按钮,发起通信请求,通信成功在就收到native返回的数据后将text的文案修改。
我们看一下最终的效果:
MethodChannel通信是双向的,也就是说,Flutter端可以向native发起通信,native也可以向Flutter端发起通信,本质上就是反过来调用一下,原理上是同一个意思,具体的代码就不在这里写了,需要的话可以自行百度一下!
-
EventChannel
EventChannel的使用我们也以官方获取电池电量的demo为例,手机的电池状态是不停变化的。我们要把这样的电池状态变化由Native及时通过EventChannel来告诉Flutter。这种情况用之前讲的MethodChannel办法是不行的,这意味着Flutter需要用轮询的方式不停调用getBatteryLevel来获取当前电量,显然是不正确的做法。而用EventChannel的方式,则是将当前电池状态"推送"给Flutter。
第一步:MainActivity内注册EventChannel,并提供获取电量的方法-native端
public class EventChannelPlugin implements EventChannel.StreamHandler { private Handler handler; private static final String CHANNEL = "com.example.flutter_battery/stream"; private int count = 0; public static void registerWith(PluginRegistry.Registrar registrar) { // 新建 EventChannel, CHANNEL常量的作用和 MethodChannel 一样的 final EventChannel channel = new EventChannel(registrar.messenger(), CHANNEL); // 设置流的处理器(StreamHandler) channel.setStreamHandler(new EventChannelPlugin()); } @Override public void onListen(Object o, EventChannel.EventSink eventSink) { // 每隔一秒数字+1 handler = new Handler(message -> { // 然后把数字发送给 Flutter eventSink.success(++count); handler.sendEmptyMessageDelayed(0, 1000); return false; }); handler.sendEmptyMessage(0); } @Override public void onCancel(Object o) { handler.removeMessages(0); handler = null; count = 0; } }
其中onCancel代表对面不再接收,这里我们应该做一些clean up的事情。而 onListen则代表通道已经建好,Native可以发送数据了。注意onListen里带的EventSink这个参数,后续Native发送数据都是经过EventSink的。
第二步:同MethodChannel一样,发起通信请求
class _MyHomePageState extends State{ // 创建 EventChannel static const stream = const EventChannel('com.example.flutter_battery/stream'); int _count = 0; StreamSubscription _timerSubscription; void _startTimer() { if (_timerSubscription == null) // 监听 EventChannel 流, 会触发 Native onListen回调 _timerSubscription = stream.receiveBroadcastStream().listen(_updateTimer); } void _stopTimer() { _timerSubscription?.cancel(); _timerSubscription = null; setState(() => _count = 0); } void _updateTimer(dynamic count) { print("--------$count"); setState(() => _count = count); } @override void dispose() { super.dispose(); _timerSubscription?.cancel(); _timerSubscription = null; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Container( margin: EdgeInsets.only(left: 10, top: 10), child: Center( child: Column( children: [ Row( children: [ RaisedButton( child: Text('Start EventChannel', style: TextStyle(fontSize: 12)), onPressed: _startTimer, ), Padding( padding: EdgeInsets.only(left: 10), child: RaisedButton( child: Text('Cancel EventChannel', style: TextStyle(fontSize: 12)), onPressed: _stopTimer, )), Padding( padding: EdgeInsets.only(left: 10), child: Text("$_count"), ) ], ) ], ), ), ), ); } }
整体说明一下:Flutter端通过stream.receiveBroadcastStream().listen监听native发送过来的数据,native端通过eventSink.success(++count)不断的将数据返回给Flutter端,这样就实现了我们想要的实时监听的效果了!
-
BasicMessageChannel
其实他就是一个简版的MethodChannel,也可以说MethodChannel是基于BasicMessageChannel实现的,BasicMessageChannel只是进行通信,更通俗的理解就是两端发通知,但是不需要进行方法匹配。
第一步:初始化及注册-native
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 省略其他代码... messageChannel = new BasicMessageChannel<>(flutterView, CHANNEL, StringCodec.INSTANCE); messageChannel. setMessageHandler(new MessageHandler() { @Override public void onMessage(String s, Reply reply) { // 接收到Flutter消息, 更新Native onFlutterIncrement(); reply.reply(EMPTY_MESSAGE); } }); FloatingActionButton fab = findViewById(R.id.button); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 通知 Flutter 更新 sendAndroidIncrement(); } }); } private void sendAndroidIncrement() { messageChannel.send(PING); } private void onFlutterIncrement() { counter++; TextView textView = findViewById(R.id.button_tap); String value = "Flutter button tapped " + counter + (counter == 1 ? " time" : " times"); textView.setText(value); }
第二步:Flutter端发起通信-flutter
class _MyHomePageState extends State{ static const String _channel = 'increment'; static const String _pong = 'pong'; static const String _emptyMessage = ''; static const BasicMessageChannel platform = BasicMessageChannel (_channel, StringCodec()); int _counter = 0; @override void initState() { super.initState(); // 设置消息处理器 platform.setMessageHandler(_handlePlatformIncrement); } // 如果接收到 Native 的消息 则数字+1 Future _handlePlatformIncrement(String message) async { setState(() { _counter++; }); // 发送一个空消息 return _emptyMessage; } // 点击 Flutter 中的 FAB 则发消息给 Native void _sendFlutterIncrement() { platform.send(_pong); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('BasicMessageChannel'), ), body: Container( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: Center( child: Text( 'Platform button tapped $_counter time${_counter == 1 ? '' : 's'}.', style: const TextStyle(fontSize: 17.0)), ), ), Container( padding: const EdgeInsets.only(bottom: 15.0, left: 5.0), child: Row( children: [ Image.asset('assets/flutter-mark-square-64.png', scale: 1.5), const Text('Flutter', style: TextStyle(fontSize: 30.0)), ], ), ), ], )), floatingActionButton: FloatingActionButton( onPressed: _sendFlutterIncrement, child: const Icon(Icons.add), ), ); } }