Flutter事件监听与EventBus事件的应用详解

 更新时间:2023年04月13日 09:20:46   作者:iOS_Apple  
EventBus的核心是基于Streams。它允许侦听器订阅事件并允许发布者触发事件,使得不同组件的数据不需要一层层传递,可以直接通过EventBus实现跨组件通讯

在Flutter中,手势有两个不同的层次:

第一层:原始指针事件(Pointer Events)

第二层:手势识别(Gesture Detector)

一 指针事件 Pointer

其原理是什么?

1 在指针落下的时候,框架做了一个hit test 的操作,确定与屏幕发生接触的位置有哪些的Widget 以及分发给最内部的组件去响应

2 事件会沿着最内部的组件向组件树的根冒泡分发

3 并且不存在用于取消或者停止指针事件进一步分发的机制

class _EventPointerDemoPageState extends State<EventPointerDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("事件监听"),
      ),
      body: Center(
          child: Listener(
        onPointerDown: (event) {
          // 相对于这个container 的 位置
          print(event.localPosition);
          // 相对于屏幕的位置
          print(event.position);
          // print("手指按下了$event");
        },
        onPointerMove: (event) {
          // print("手指移动了$event");
        },
        onPointerUp: (event) {
          // print("手指抬起了$event");
        },
        child: Container(
          width: 200,
          height: 200,
          color: Colors.redAccent,
        ),
      )),
    );
  }
}

二 手势识别

手势识别Gesture 是对一系列Pointer的封装,官方建议尽可能使用Gesture

1 点击

onTapDown用户发生手指按下的操作
onTapUp用户发生手指抬起的操作
onTap用户点击事件完成
onTapCancel事件按下过程中被取消

2 双击

onDoubleTap快速点击了两次

3 长按

onLongPress在屏幕上保持了一段时间

4 纵向拖拽

onVerticalDragStart指针和屏幕产生接触并可能开始纵向移动;
onVerticalDragUpdate指针和屏幕产生接触,在纵向上发生移动并保持移动;
onVerticalDragEnd指针和屏幕产生接触结束

5 横向拖拽

onHorizontalDragStart指针和屏幕产生接触并可能开始横向移动;
onHorizontalDragUpdate指针和屏幕产生接触,在横向上发生移动并保持移动
onHorizontalDragEnd指针和屏幕产生接触结束;

6 移动

onPanStart指针和屏幕产生接触并可能开始横向移动或者纵向移动。如果设置了 onHorizontalDragStart 或者 onVerticalDragStart,该回调方法会引发崩溃
onPanUpdate指针和屏幕产生接触,在横向或者纵向上发生移动并保持移动。如果设置了 onHorizontalDragUpdate 或者 onVerticalDragUpdate,该回调方法会引发崩溃。
onPanEnd指针先前和屏幕产生了接触,并且以特定速度移动,此后不再在屏幕接触上发生移动。如果设置了 onHorizontalDragEnd 或者 onVerticalDragEnd,该回调方法会引发崩溃。

基本使用

_gestureDemo() {
    return GestureDetector(
      onTap: () {
        print("点击事件完成了");
      },
      onPanEnd: (details) {
        print(details);
      },
      onTapDown: (details) {
        // 相对于container
        print(details.localPosition);
        // 相对于屏幕的
        print(details.globalPosition);
      },
      onTapUp: (details) {
        // 抬起之后 才会调用 onTap ,证明点击事件完成了
        print("1111");
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blueAccent,
      ),
    );
  }

三 跨组件事件的传递

多重组件的事件传递使用的是EventBus,很方便。

官方建议我们定义不同的Event ,从而区别不同的event

使用的是插件event_bus ,简单 的三步走操作

1 创建全局的event_bus,

import "package:event_bus/event_bus.dart";
// 定义一个全局的eventBus
final eventBus = EventBus();
class MyEventMessage {
  String? name;
  String? action;
  MyEventMessage(this.name, this.action);
}

2 fire

 return ElevatedButton(
        onPressed: () {
          print("点击事件");
          // 第二步fire
          eventBus.fire(MyEventMessage("leonardo", "hahaha"));
        },
        child: Text("改变文字"));
  }

3 listen

 void initState() {
    // TODO: implement initState
    super.initState();
    // 第三步监听操作
    eventBus.on<MyEventMessage>().listen((event) {
      print(event.name);
      setState(() {
        _name = event.name!;
      });
    });
  }

到此这篇关于Flutter事件监听与EventBus事件的应用详解的文章就介绍到这了,更多相关Flutter事件监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android 点击屏幕空白处收起输入法软键盘(手动打开)

    Android 点击屏幕空白处收起输入法软键盘(手动打开)

    很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步对软键盘进行隐藏。为了更好的体验,我们可以实现当用户使用完毕软键盘时。点击屏幕空白即可实现收起输入法软键盘
    2016-12-12
  • 深入了解Android中GestureDetector的定义与使用

    深入了解Android中GestureDetector的定义与使用

    Android中的GestureDetector 可以使用 MotionEvents 检测各种手势和事件,非常的好用。本文将会通过几个具体的例子来讲解一下GestureDetector的具体使用方法,需要的可以参考一下
    2023-01-01
  • Android 拍照后返回缩略图的两种方法介绍

    Android 拍照后返回缩略图的两种方法介绍

    大家好,本篇文章主要讲的是Android 拍照后返回缩略图的两种方法介绍,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下
    2022-01-01
  • 深入分析Android构建过程

    深入分析Android构建过程

    本篇内容主要讲了Android 构建的过程需要的步骤以及从编译到生成等原理,一起来学习下。
    2017-11-11
  • Android判断app是否在后台运行

    Android判断app是否在后台运行

    这篇文章主要为大家介绍了Android判断app是否在后台运行的实现流程及代码实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • android自定义view用path画长方形

    android自定义view用path画长方形

    这篇文章主要为大家详细介绍了android自定义view用path画长方形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • Android 如何在私有空间创建文件

    Android 如何在私有空间创建文件

    在Android应用程序中,我们经常需要在私有空间中创建文件来存储应用数据,例如用户配置文件、日志文件等,本文将介绍如何在Android应用中使用Java代码创建文件并将其保存在私有空间中,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 详细讲解AsyncTask使用说明(值得收藏)

    详细讲解AsyncTask使用说明(值得收藏)

    AsyncTask就相当于Android给我们提供了一个多线程编程的一个框架,其介于Thread和Handler之间,我们如果要定义一个AsyncTask,就需要定义一个类来继承AsyncTask这个抽象类,并实现其唯一的一doInBackgroud 抽象方法,这篇文章主要介绍了AsyncTask详解,需要的朋友可以参考下
    2024-01-01
  • Android中handler使用浅析

    Android中handler使用浅析

    本文主要介绍了Android中handler的使用,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • android studio 3.6.1升级后如何处理 flutter问题

    android studio 3.6.1升级后如何处理 flutter问题

    这篇文章主要介绍了android-studio-3.6.1升级后 flutter问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03

最新评论