Flutter笔记八之事件监听

Flutter把事件监听分成两个部分，分别是原始指针事件(Pointer Events)和手势识别(Gesture Detector),官方建议使用后者

Pointer Events

• PointerDownEvent 接触屏幕（单击）
• PointerMoveEvent 在屏幕上移动
• PointerUpEvent 从屏幕上抬起
• PointerCancelEvent 如电量不足等特殊情况取消监听事件
• PointerHover 网页上鼠标的悬浮
• PointerSignal 网上查的是当指针信号出现时调用，盲猜也是网页上的，以后遇到再说

Listener(
  onPointerDown: (event) {
    print("点击事件，屏幕位置：${event.position},Widget内位置${event.localPosition}");
  },
  onPointerMove: (event) {
    print("移动事件，屏幕位置：${event.position},Widget内位置${event.localPosition}");
  },
  onPointerUp: (event){
    print("抬起事件，屏幕位置：${event.position},Widget内位置${event.localPosition}");
  },
  onPointerCancel: (event){
    print("打断取消事件");
  },
  onPointerHover: (event) {
    print("网页悬浮事件);
  },
  onPointerSignal: (event) {
    print("指针信号出现");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)

Gesture Detector（一共几十个，写几个常用的）

• onTapDown: 手指按下
• onTapUp: 手指抬起
• onTapCancel: 取消
• onTap: 单击
• onDoubleTap: 双击
• onLongPress: 长按

GestureDetector(
  onTapDown: (details) {
    print("手指按下，屏幕位置：${details.globalPosition},Widget内位置${details.localPosition}");
  },
  onTapUp: (details) {
    print("手指抬起，屏幕位置：${details.globalPosition},Widget内位置${details.localPosition}");
  },
  onTapCancel: (){
    print("取消-把指头移到Widget外会触发，长按也会触发");
  },
  onTap: (){
    print("单击，在onTapDown，onTapUp后触发");
  },
  onDoubleTap: (){
    print("双击，使onTapDown，onTapUp，onTapCancel，onTap失效");
  },
  onLongPress: (){
    print("长按，使onTapUp失效");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
)

阻止手势监听包裹IgnorePointer即可

GestureDetector(
  onTap: (){
    print("单击111");
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
    alignment: Alignment.center,
    child: IgnorePointer(
      child: GestureDetector(
        onTap: (){
          print("单击222");
        },
        child: Container(
          width: 100,
          height: 100,
          color: Colors.yellow,
        ),
      ),
    ),
  ),
)

注：以前版本的Flutter里面有嵌套Widget的手势穿透问题，解决方法是通过使用Stack解除嵌套，使其变成并列的Widget，但通过实践发现，目前这个问题已经被官方解决了。

版权声明：本文为 Crazy Steven 原创出品，欢迎转载，转载时请注明出处！