Flutter学习笔记（29）–Flutter如何与native进行通信
- 2019 年 10 月 12 日
- 笔记
如需转载，请注明出处：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 State<StatefulWidget> createState() { // TODO: implement createState return new MyAppState(); } } class MyAppState extends State<MyApp> { var _textContent = 'welcome to flutter word'; Future<Null> _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: <Widget>[ 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<MyHomePage> { // 创建 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: <Widget>[ 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<String>() { @Override public void onMessage(String s, Reply<String> 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<MyHomePage> { static const String _channel = 'increment'; static const String _pong = 'pong'; static const String _emptyMessage = ''; static const BasicMessageChannel<String> platform = BasicMessageChannel<String>(_channel, StringCodec()); int _counter = 0; @override void initState() { super.initState(); // 设置消息处理器 platform.setMessageHandler(_handlePlatformIncrement); } // 如果接收到 Native 的消息 则数字+1 Future<String> _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: <Widget>[ 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: <Widget>[ 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), ), ); } }
