Flutter手势组件（2）：PointerEvent

一、PointerEvent介绍

PointerEvent是触摸、手写笔、鼠标事件的基类。

在上文中，我们知道了什么是Listener并写了一个简单的案例，在使用案例的过程中我们的事件里面都带了一个event参数，而所有的事件最终都是继承自PointerEvent，那我们接下来看看event的参数有什么作用。

二、PointerEvent构造函数

const PointerEvent({
  this.embedderId = 0,
  this.timeStamp = Duration.zero,
  this.pointer = 0,
  this.kind = PointerDeviceKind.touch,
  this.device = 0,
  this.position = Offset.zero,
  Offset? localPosition,
  this.delta = Offset.zero,
  Offset? localDelta,
  this.buttons = 0,
  this.down = false,
  this.obscured = false,
  this.pressure = 1.0,
  this.pressureMin = 1.0,
  this.pressureMax = 1.0,
  this.distance = 0.0,
  this.distanceMax = 0.0,
  this.size = 0.0,
  this.radiusMajor = 0.0,
  this.radiusMinor = 0.0,
  this.radiusMin = 0.0,
  this.radiusMax = 0.0,
  this.orientation = 0.0,
  this.tilt = 0.0,
  this.platformData = 0,
  this.synthesized = false,
  this.transform,
  this.original,
}) : localPosition = localPosition ?? position,
     localDelta = localDelta ?? delta;

三、PointerEvent属性和说明

PointerEvent的属性非常多，但在我们实际的开发过程中很少会使用到，只有在特定的情景下才会使用对应的属性。

• 如需要做一个全局悬浮的按钮我们会使用到position

• 如需要做绘图软件我们需要用到buttons、kind等

所以大家可以根据实际的应用场景来使用对应的属性即可，下面是我对PointerEvent的属性进行的一个详细描述：

四、behavior属性

behavior属性，它决定子组件如何响应命中测试，它的值类型为HitTestBehavior，这是一个枚举类，有三个枚举值

• HitTestBehavior.deferToChild：对子组件一个接一个的进行命中测试，如果子组件中有测试通过的，则当前组件通过，这就意味着，如果指针事件作用于子组件上时，其父级组件也肯定可以收到该事件

• HitTestBehavior.opaque：在命中测试时，将当前组件当成不透明处理(即使本身是透明的)，最终的效果相当于当前Widget的整个区域都是点击区域

• HitTestBehavior.translucent：点击组件透明区域时，可以对自身边界内及底部可视区域都进行命中测试，这意味着点击顶部组件透明区域时，顶部组件和底部组件都可以接收到事件

五、代码演示

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListenerSimpleExample(),
    );
  }
}

class ListenerSimpleExample extends StatefulWidget {
  const ListenerSimpleExample({super.key});  
  @override
  State<ListenerSimpleExample> createState() => _ListenerSimpleExampleState();
}

class _ListenerSimpleExampleState extends State<ListenerSimpleExample> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Listener"),
      ),
      body: Center(
        child: Stack(
          children: [
            Listener(
              child: ConstrainedBox(
                  constraints: BoxConstraints.tight(Size(400, 200)),
                  child: Container(
                    color: Colors.greenAccent,
                  )
              ),
              onPointerDown: (event) => debugPrint("绿色盒子被点击了"),
            ),
            Listener(
              onPointerDown: (event) => debugPrint("文字点击事件回调"),
              behavior: HitTestBehavior.deferToChild,
              // behavior: HitTestBehavior.opaque,
              // behavior: HitTestBehavior.translucent,              
              child: ConstrainedBox(
                constraints: BoxConstraints.tight(Size(400, 200)),
                child: Center(child: Text("点击文字", style: TextStyle(
                  color: Colors.white,
                  fontSize: 30
                ),)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

我们这里演示每次都是先点击绿色盒子在点击文字，以便大家能更好的分辨出这三个属性的使用区别。

当属性设置为HitTestBehavior.deferToChild控制台输出结果：

flutter: 绿色盒子被点击了
flutter: 文字点击事件回调

当属性设置为HitTestBehavior.opaque控制台输出结果：

flutter: 文字点击事件回调
flutter: 文字点击事件回调

当属性设置为HitTestBehavior.translucent控制台输出结果：

flutter: 文字点击事件回调
flutter: 绿色盒子被点击了
flutter: 文字点击事件回调