Day12 - Flutter - 事件监听

概述

• 事件监听
• 跨组件事件

一、事件监听

• 1.1、在Flutter中，手势的两个不同的层次

  • 第一层：原始指针事件（Pointer Events）：描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。
  • 第二层：手势识别（Gesture Detector）：这个是在原始事件上的一种封装。
    • 比如我们要监听用户长按，如果自己封装原始事件我们需要监听从用户按下到抬起的时间来判断是否是一次长按事件；
    • 比如我们需要监听用户双击事件，我们需要自己封装监听用户两次按下抬起的时间间隔；
    • 幸运的是各个平台几乎都对它们进行了封装，而Flutter中的手势识别就是对原始指针事件的封装；
    • 包括哪些手势呢？比如点击、双击、长按、拖动等

• 1.2、指针事件 Pointer
  Pointer 代表的是人机界面交互的原始数据。一共有四种指针事件：

  • PointerDownEvent 指针在特定位置与屏幕接触
  • PointerMoveEvent 指针从屏幕的一个位置移动到另外一个位置
  • PointerUpEvent 指针与屏幕停止接触
  • PointerCancelEvent 指针因为一些特殊情况被取消，电话等等

  Pointer的原理是什么呢？

  • 在指针落下时，框架做了一个 hit test 的操作，确定与屏幕发生接触的位置上有哪些Widget以及分发给最内部的组件去响应；
  • 事件会沿着最内部的组件向组件树的根冒泡分发；
  • 并且不存在用于取消或者停止指针事件进一步分发的机制；

  原始指针事件使用Listener来监听：

  Center(
     child: Listener(
        onPointerDown: (event) {
          print('指针按下：$event'); 
        },
        onPointerMove: (event) {
          print('指针移动：$event');
        },
        onPointerUp: (event) {
          print('指针松开：$event');
        },
        onPointerCancel: (event) {
          print('指针打断取消：$event');
        },
        child: Container(
          width: 200,
          height: 200,
          color: Colors.green,
        ),
     )
  );
  

  提示：我们如果想拿到点击的位置，可以如下

  • 1、event.position 在整个界面内的位置
  • 2、event.localPosition 在自己内部的位置

• 1.3、手势识别Gesture
  Gesture是对一系列Pointer的封装，官方建议开发中尽可能使用Gesture，而不是Pointer。
  Gesture分层非常多的种类：

  • 点击：
    • onTapDown：用户发生手指按下的操作
    • onTapUp：用户发生手指抬起的操作
    • onTap：用户点击事件完成
    • onTapCancel：事件按下过程中被取消
  • 双击：
    • onDoubleTap：快速点击了两次
  • 长按：
    • onLongPress：在屏幕上保持了一段时间
  • 纵向拖拽：
    • onVerticalDragStart：指针和屏幕产生接触并可能开始纵向移动；
    • onVerticalDragUpdate：指针和屏幕产生接触，在纵向上发生移动并保持移动；
    • onVerticalDragEnd：指针和屏幕产生接触结束；
  • 横线拖拽：
    • onHorizontalDragStart：指针和屏幕产生接触并可能开始横向移动；
    • onHorizontalDragUpdate：指针和屏幕产生接触，在横向上发生移动并保持移动；
    • onHorizontalDragEnd：指针和屏幕产生接触结束；
  • 移动：
    • onPanStart：指针和屏幕产生接触并可能开始横向移动或者纵向移动。如果设置了 onHorizontalDragStart 或者 onVerticalDragStart，该回调方法会引发崩溃；
      onPanUpdate：指针和屏幕产生接触，在横向或者纵向上发生移动并保持移动。如果设置了 onHorizontalDragUpdate 或者 onVerticalDragUpdate，该回调方法会引发崩溃。
    • onPanEnd：指针先前和屏幕产生了接触，并且以特定速度移动，此后不再在屏幕接触上发生移动。如果设置了 onHorizontalDragEnd 或者 onVerticalDragEnd，该回调方法会引发崩溃。

  从Widget的层面来监听手势，我们需要使用：GestureDetector

  • 当然，我们也可以使用RaisedButton、FlatButton、InkWell等来监听手势

  • globalPosition用于获取相对于屏幕的位置信息

  • localPosition用于获取相对于当前Widget的位置信息

    Center(
       child: GestureDetector(
            onTapDown: (detail) {
                print('手指按下');
            },
            onTapUp: (detail) {
                print('手指抬起');
            },
            onTapCancel: () {
                print('手势取消');
            },
            onTap: () {
                print('手势点击');
            },
            onDoubleTap: () {
                print('手势双击');
            },
            onLongPress: () {
                print('长按手势');
            },
            child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
            ),
       )
    );
    

• 1.4、看下面的一个问题，点击小的Widget，大的Widget也会响应

  Center(
     child: GestureDetector(
       onTapDown: (detail) {
          print('点击---大---的Widget');
       },
       child: Container(
          alignment: Alignment.center,
          width: 200,
          height: 200,
          color: Colors.brown,
          child: GestureDetector(
             onTapDown: (detail) {
               print('点击---小---的Widget');
             },
             child: Container(
               width: 100,
               height: 100,
               color: Colors.yellow,
             ),
          ),
       ),
    ),
  );
  

  解决问题，我们用 Stack 包括两个 GestureDetector 如下

  Center(
     child: Stack(
        alignment: Alignment.center,
        children: [
           GestureDetector(
              onTapDown: (detail) {
                 print('点击---大---的Widget');
              },
             child: Container(
                alignment: Alignment.center,
                width: 200,
                height: 200,
                color: Colors.brown,
             ),
           ),
           GestureDetector(
             onTapDown: (detail) {
               print('点击---小---的Widget');
             },
             child: Container(
               width: 100,
               height: 100,
               color: Colors.yellow,
             ),
           ),
        ],
     ),
  );
  

  假如我们想点击小的没反应，传递给大的 Widget 怎么办呢？那么我们就需要阻塞小的Widget，那么我们就需要给小的 Widget 包裹一个 IgnorePointer，让它手势事件，如下

  IgnorePointer(
      child: GestureDetector(
          onTapDown: (detail) {
            print('点击---小---的Widget');
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
          ),
      ),
  ),
  

二、跨组件事件（事件的传递）

在组件之间如果有事件需要传递，一方面可以一层层来传递，另一方面我们也可以使用一个EventBus工具来完成。
其实EventBus在Vue、React中都是一种非常常见的跨组件通信的方式：
EventBus相当于是一种订阅者模式，通过一个全局的对象来管理；
这个EventBus我们可以自己实现，也可以使用第三方的EventBus；
这里我们直接选择第三方的 Event Bus：

dependencies:
   event_bus: ^2.0.0

• 第一：我们需要定义一个希望在组件之间传递的对象：我们可以称之为一个事件对象，也可以是我们平时开发中用的模型对象（model）

  class UserInfo {
     String nickname;
     int level;
  
     UserInfo(this.nickname, this.level);
  }
  

• 第二：创建一个全局的EventBus对象

  final eventBus = EventBus();
  

• 第三：在某个Widget中，发出事件：

  class HYButton extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
          return RaisedButton(
             child: Text("HYButton"),
             onPressed: () {
                 final info = UserInfo("why", 18);
                 eventBus.fire(info);
             },
          );
       }
  }
  

• 第四：在某个Widget中，监听事件

  class JKText extends StatefulWidget {
     @override
     _JKTextState createState() => _JKTextState();
  }
  
  class _JKTextState extends State {
     String _message = 'Hello World!';
  
     @override
     void initState() {
         // TODO: implement initState
         super.initState();
  
         eventBus.on().listen((data) {
            setState(() {
                _message = '${data.nickname} ${data.age}';
            });
  
         });
     }
  
     @override
     Widget build(BuildContext context) {
        return Text('$_message', style: TextStyle(fontSize: 22, color: Colors.green),);
     }
  }