Flutter学习笔记（32）--PointerEvent事件处理

如需转载，请注明出处：Flutter学习笔记（32）--PointerEvent事件处理

在Android原生的开发中，对于事件的处理，我们都知道事件分为down、move、up事件，对于ViewGroup有事件分发、拦截和消费处理，对于View有分发和消费处理，在Flutter中也是一样，事件分为down、move、up事件。

在Flutter中对事件的监听是通过Listener来监听原始触摸事件，Listener的构造方法如下：

const Listener({
  Key key,
  this.onPointerDown,//手指按下回调
  this.onPointerMove,//手指移动回调
  this.onPointerUp,//手指弹起回调
  this.onPointerCancel,//触摸事件取消回调
  this.behavior = HitTestBehavior.deferToChild,//在命中测试期间如何表现
  Widget child,
})

先看一下demo示例：

import 'package:flutter/material.dart';

class PointerEventDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PointerEventDemo',
      home: _PointerEventDemoHome(),
    );
  }
}

class _PointerEventDemoHome extends StatefulWidget {
  @override
  State createState() {
    return _PointerEventDemoHomeState();
  }
}

class _PointerEventDemoHomeState extends State {
  PointerEvent _event;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('PointerEventDemo'),
        ),
        body: new Container(
          alignment: Alignment.center,
          color: Colors.red,
          width: 400,
          height: 300,
          child: new Listener(
            child: new Container(
              alignment: Alignment.center,
              color: Colors.tealAccent,
              width: 200.0,
              height: 150.0,
              child: new Text(
                _event?.toString() ?? '',
                style: new TextStyle(color: Colors.red),
              ),
            ),
            //不同响应时的处理
            onPointerDown: (PointerDownEvent event) =>
                setState(() => _event = event),
            onPointerMove: (PointerMoveEvent event) =>
                setState(() => _event = event),
            onPointerUp: (PointerUpEvent event) =>
                setState(() => _event = event),
            behavior: HitTestBehavior.translucent,
          ),
        ),
      ),
    );
  }
}

Listener本身是一个功能组件，它用来监听内部组件的触摸事件，事件会从最内层的widget一直向上冒泡到最外层的widget，监听到了用户的触摸事件，会回调到对应的响应处理onPointerDown、onPointerMove、onPointerUp。
demo很简单，就是响应用户的触摸操作，然后打印指针坐标。

忽略PointerEvent

假如我们不想让某个子树响应 PointerEvent的话，我们可以使用 IgnorePointer和 AbsorbPointer，这两个组件都能阻止子树接收指针事件，不同之处在于 AbsorbPointer本身会参与命中测试，而 IgnorePointer本身不会参与，这就意味着 AbsorbPointer本身是可以接收指针事件的(但其子树不行)，而 IgnorePointer不可以。示例如下：

Listener(
  child: AbsorbPointer(
    child: Listener(
      child: Container(
        color: Colors.red,
        width: 200.0,
        height: 100.0,
      ),
      onPointerDown: (event)=>print("in"),
    ),
  ),
  onPointerDown: (event)=>print("up"),
)

点击 Container时，由于它在 AbsorbPointer的子树上，所以不会响应指针事件，所以日志不会输出"in"，但 AbsorbPointer本身是可以接收指针事件的，所以会输出"up"。如果将 AbsorbPointer换成 IgnorePointer，则两个都不会输出。