flutter学习-事件监听

最新推荐文章于 2024-02-22 19:25:07 发布

原创

最新推荐文章于 2024-02-22 19:25:07 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文详细介绍了Flutter中原始指针事件（PointerEvents）和手势识别（GestureDetector）的使用，包括点击、双击、长按、拖动等常见手势的监听。原始指针事件通过Listener监听，而GestureDetector提供了更高级别的封装。在处理手势时，注意事件冒泡和穿透问题，可以通过设置alignment或使用Stack来避免。此外，还提到了跨组件事件传递，推荐使用EventBus工具进行全局事件通信。

在大前端的开发中，必然存在着各种各样和用户交互的情况：比如手指点击，手指滑动、双击、长按等

在Flutter中，手势有两个不同的层次：

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

1. 指针事件Point

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

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

Pointer的原理是什么呢？

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

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

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child: Listener(
                onPointerDown: (event) {
   
   
                  print("指针按下：event=====${event}");
                },
                onPointerMove: (event) {
   
   
                  print("指针移动：event=======$event");
                },
                onPointerUp: (event) {
   
   
                  print("指针抬起:event=====$event");
                },
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                ),
              ),
            )
        )
    );
  }
}