【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )

简介: 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )

文章目录

一、EventChannel 简介

二、EventChannel 在 Dart 端的实现

1、EventChannel 构造方法

2、创建广播流 Stream

3、设置监听回调函数

4、EventChannel 使用流程






一、EventChannel 简介


EventChannel 一般用于持续的通信 , 如 : 将 Android 应用中采集的陀螺仪 , GPS 等信息 , 持续的发送给 Flutter 应用 ;


该通信时单向的 , 收到信息的一方无法回复 ;






二、EventChannel 在 Dart 端的实现



1、EventChannel 构造方法


EventChannel 的构造函数原型如下 :


class EventChannel {
  /// Creates an [EventChannel] with the specified [name].
  ///
  /// The [codec] used will be [StandardMethodCodec], unless otherwise
  /// specified.
  ///
  /// Neither [name] nor [codec] may be null. The default [ServicesBinding.defaultBinaryMessenger]
  /// instance is used if [binaryMessenger] is null.
  const EventChannel(this.name, [this.codec = const StandardMethodCodec(), BinaryMessenger? binaryMessenger])
      : assert(name != null),
        assert(codec != null),
        _binaryMessenger = binaryMessenger;
  /// The logical channel on which communication happens, not null.
  final String name;
  /// The message codec used by this channel, not null.
  final MethodCodec codec;
}


EventChannel 构造方法参数说明 :


String name 参数 : Channel 通道名称 , Native 应用端 与 Flutter 中的 Channel 名称 , 必须一致 ;


MethodCodec<T> codec 参数 : 消息编解码器 , 默认类型是 StandardMethodCodec ; Native 应用端 与 Flutter 中的消息编解码器也要保持一致 ;



2、创建广播流 Stream


创建了 EventChannel 实例对象之后 , 调用


/// Sets up a broadcast stream for receiving events on this channel.
  ///
  /// Returns a broadcast [Stream] which emits events to listeners as follows:
  ///
  /// * a decoded data event (possibly null) for each successful event
  ///   received from the platform plugin;
  /// * an error event containing a [PlatformException] for each error event
  ///   received from the platform plugin.
  ///
  /// Errors occurring during stream activation or deactivation are reported
  /// through the [FlutterError] facility. Stream activation happens only when
  /// stream listener count changes from 0 to 1. Stream deactivation happens
  /// only when stream listener count changes from 1 to 0.
  Stream<dynamic> receiveBroadcastStream([ dynamic arguments ]) {
  }


方法 , 可以创建一个 广播流 Stream , 调用该 Stream 实例对象的 listen 方法 , 可以注册消息持续监听 , 用于从 Channel 消息通道中持续接收消息 ; 如果要停止监听 , 可以调用 Stream 的 cancel 方法 ;


receiveBroadcastStream 方法参数 / 返回值 说明 :


[ dynamic arguments ] 参数 : 监听 Native 传递来的消息时 , 向 Native 传递的数据 ;

Stream<dynamic> 返回值 : 创建的监听用的广播流 ;


注意 : 消息的监听 , 和 取消监听 , 一定个要一一对应 , 防止出现



3、设置监听回调函数


调用 Stream 的 listen 方法 , 传入两个方法参数 ,


 

StreamSubscription<T> listen(void onData(T event)?,
      {Function? onError, void onDone()?, bool? cancelOnError});


第一个参数 void onData(T event) , 参数为 T 泛型 , 返回值 void , 这是消息到来后回调的函数 ;


Function? onError 参数 , 参数 和 返回值都是 void , 这是出现错误后回调的函数 ;



代码示例 :


 

// 注册 EventChannel 监听
    _streamSubscription = _eventChannel
        .receiveBroadcastStream()
        /// StreamSubscription<T> listen(void onData(T event)?,
        ///   {Function? onError, void onDone()?, bool? cancelOnError});
        .listen(
          /// EventChannel 接收到 Native 信息后 , 回调的方法
          (message) {
            setState(() {
            /// 接收到消息 , 显示在界面中
            showMessage = message;
            });
          },
          onError: (error){
            print(error);
          }
        );


4、EventChannel 使用流程


使用流程 :


首先 , 导入 Flutter 与 Native 通信 的 Dart 包 ;


import 'package:flutter/services.dart';
import 'dart:async';


然后 , 定义并实现 EventChannel 对象实例 ;


static const EventChannel _eventChannel =
    EventChannel('EventChannel');
  /// 监听 EventChannel 数据的句柄
  late StreamSubscription _streamSubscription;


接着 , 创建广播流 , 并监听消息 , 一般在 initState 方法中设置监听 ;


@override
  void initState() {
    // 注册 EventChannel 监听
    _streamSubscription = _eventChannel
        .receiveBroadcastStream()
        /// StreamSubscription<T> listen(void onData(T event)?,
        ///   {Function? onError, void onDone()?, bool? cancelOnError});
        .listen(
          /// EventChannel 接收到 Native 信息后 , 回调的方法
          (message) {
            setState(() {
            /// 接收到消息 , 显示在界面中
            showMessage = message;
            });
          },
          onError: (error){
            print(error);
          }
        );
    super.initState();
  }


最后 , 如果监听完毕 , 取消监听 ; 这样可以防止不必要的内存泄漏 ;


@override
  void dispose() {
    // 取消监听
    _streamSubscription.cancel();
    super.dispose();
  }




目录
相关文章
|
5天前
|
传感器 Android开发 iOS开发
Flutter插件开发指南02: 事件订阅 EventChannel
上一节我们讲了 Channel 通道,但是如果你是卫星定位业务,原生端主动推消息给 Flutter 这时候就要用到 EventChannel 通道了。 本节会写一个 1~50 的计数器,到 50 后自动关闭原生的消息订阅。
Flutter插件开发指南02:  事件订阅 EventChannel
|
5天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
5天前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
5天前
|
开发框架 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
【4月更文挑战第30天】本文探讨了Flutter作为跨平台开发框架与原生Android和iOS交互的必要性,主要通过方法调用和事件传递实现。文中详细介绍了Flutter与Android/iOS的通信方式,数据传输(包括基本和复杂类型),性能优化,错误处理以及实际应用案例。理解并掌握这一通信机制对开发高质量移动应用至关重要,未来有望随着技术发展得到进一步优化。
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
|
5天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
5天前
|
Dart 前端开发 JavaScript
《跨平台移动应用开发探索:Flutter vs React Native》
在移动应用开发领域,跨平台技术日益成熟,Flutter和React Native作为两大主流框架备受关注。本文将对比Flutter和React Native在性能、开发体验、生态系统等方面的优劣,并探讨它们在不同场景下的适用性,以帮助开发者选择最适合自己项目的技术方案。
|
5天前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
5天前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
64 1
|
前端开发 容器
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
AnimatedDefaultTextStyle通过动画过渡的方式来切换文本的显示样式
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
|
5天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略