zoukankan      html  css  js  c++  java
  • Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)

    前言

    紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter

    还是通过 Flutter 官网的 Example 来讲解。

    案例

    接着上一次,这一次我们让原生主动将电池的充电状态发送给 Flutter 并在界面显示。

    步骤如下。

    1. Flutter 界面修改

    我们在原先基础上增加一列用于显示文本。

    String _chargingStatus = 'Battery status: unknown.';
    Text(_chargingStatus),
    
    2. Flutter 定义 EventChannel

    我们在 _BatteryWidgetState 里面加入下面变量:

    static const EventChannel eventChannel = EventChannel('samples.flutter.io/charging');
    

    samples.flutter.io/charging 可以自己指定,一般保证唯一,所以 samples 实际使用可以替换为包名。主要是要跟原生对应即可。

    3. Flutter 在 initState 实现 EventChannel 监听并实现对应回调方法
      @override
      void initState() {
        super.initState();
        eventChannel.receiveBroadcastStream().listen(_onEvent, onError: _onError);
      }
    
      void _onEvent(Object event) {
        setState(() {
          _chargingStatus =
          "Battery status: ${event == 'charging' ? '' : 'dis'}charging.";
        });
      }
    
      void _onError(Object error) {
        setState(() {
            PlatformException exception = error;
            _chargingStatus = exception?.message ?? 'Battery status: unknown.';
        });
      }
    

    可以看到如果原生发送 charging 显示 charging,否则显示 discharging。

    当然错误显示的是原生发送过来的错误信息。

    注意这里如果要获取到错误信息,需要通过

    PlatformException exception = error;
    

    这个转换语句才可以。

    4. 原生定义 EventChannel
    private static final String CHARGING_CHANNEL = "samples.flutter.io/charging";
    

    注意需要跟 Flutter 的一一对应。

    5. 原生创建 EventChannel 并通过 StreamHandler 的 EventSink 发送内容给 Flutter
    new EventChannel((FlutterView) flutterView, CHARGING_CHANNEL).setStreamHandler(
            new EventChannel.StreamHandler() {
    
                @Override
                public void onListen(Object arguments, EventChannel.EventSink events) {
                }
    
                @Override
                public void onCancel(Object arguments) {
                }
            }
    );
    

    具体到这里为:

    new EventChannel((FlutterView)flutterView, CHARGING_CHANNEL).setStreamHandler(
            new EventChannel.StreamHandler() {
                private BroadcastReceiver chargingStateChangeReceiver;
                @Override
                public void onListen(Object arguments, EventChannel.EventSink events) {
                    chargingStateChangeReceiver = createChargingStateChangeReceiver(events);
                    registerReceiver(
                            chargingStateChangeReceiver, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
                }
    
                @Override
                public void onCancel(Object arguments) {
                    unregisterReceiver(chargingStateChangeReceiver);
                    chargingStateChangeReceiver = null;
                }
            }
    );
    
    private BroadcastReceiver createChargingStateChangeReceiver(final EventChannel.EventSink events) {
        return new BroadcastReceiver() {
            @Override
            public void onReceive(Context context, Intent intent) {
                int status = intent.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
    
                if (status == BatteryManager.BATTERY_STATUS_UNKNOWN) {
                    events.error("UNAVAILABLE", "Charging status unavailable", null);
                } else {
                    boolean isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING ||
                            status == BatteryManager.BATTERY_STATUS_FULL;
                    events.success(isCharging ? "charging" : "discharging");
                }
            }
        };
    }
    

    这里的 events.successevents.error 分别会调用 Flutter 的对应方法。

    其中 error 的参数对应 Flutter 的 PlatformException 的参数。

    PlatformException({
      @required this.code,
      this.message,
      this.details,
    }) : assert(code != null);
    

    这里通过广播的方式将电量状态变化发送给 Flutter。

    效果如下:

    扩展

    其实我们点击 Flutter 的 EventChannel,会看到源码里面的 receiveBroadcastStream 方法是对 MethodChannel 做了封装。

    Stream<dynamic> receiveBroadcastStream([dynamic arguments]) {
        final MethodChannel methodChannel = MethodChannel(name, codec);
        StreamController<dynamic> controller;
        controller = StreamController<dynamic>.broadcast(onListen: () async {
          BinaryMessages.setMessageHandler(name, (ByteData reply) async {
            if (reply == null) {
              controller.close();
            } else {
              try {
                controller.add(codec.decodeEnvelope(reply));
              } on PlatformException catch (e) {
                controller.addError(e);
              }
            }
            return null;
          });
          try {
            await methodChannel.invokeMethod('listen', arguments);
          } catch (exception, stack) {
            FlutterError.reportError(FlutterErrorDetails(
              exception: exception,
              stack: stack,
              library: 'services library',
              context: 'while activating platform stream on channel $name',
            ));
          }
        }, onCancel: () async {
          BinaryMessages.setMessageHandler(name, null);
          try {
            await methodChannel.invokeMethod('cancel', arguments);
          } catch (exception, stack) {
            FlutterError.reportError(FlutterErrorDetails(
              exception: exception,
              stack: stack,
              library: 'services library',
              context: 'while de-activating platform stream on channel $name',
            ));
          }
        });
        return controller.stream;
      }
    

    所以其实原生-> Flutter 的通信也是可以用 MethodChannel 直接实现。

    那怎么实现呢?

    欲知详情,且听下回讲解

    本文源码位置:
    https://github.com/nesger/FlutterSample/tree/feature/event_channel

    参考链接:

    https://flutter.dev/docs/development/platform-integration/platform-channels
    https://github.com/flutter/flutter/tree/master/examples/platform_channel

    更多阅读:
    Flutter 即学即用系列博客
    Flutter 即学即用系列博客——01 环境搭建
    Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
    Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
    Flutter 即学即用系列博客——04 Flutter UI 初窥
    Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
    Flutter 即学即用系列博客——06 超实用 Widget 集锦
    Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考
    Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    Flutter & dart
    dart 如何优雅的避空
    Flutter map 妙用及 .. 使用

  • 相关阅读:
    多线程----Thread类,Runnable接口,线程池,Callable接口,线程安全
    PHP-数据类型
    MySQL-数据与事务控制语言
    数据库查询练习题
    MySQL-数据操作语言(DML)
    MySQL-表操作
    MySQL-数据类型
    MySQL-数据库相关操作
    js Dom简单练习题
    js中的Dom操作
  • 原文地址:https://www.cnblogs.com/nesger/p/10580750.html
Copyright © 2011-2022 走看看