鸿蒙开发如何实现使用单一手势实现多次点击事件

文
章
目
录

• 点击手势（TapGesture）介绍
• 实现多次点击
• 实现多指点击
• 相关总结

基于鸿蒙Api13，每个组件都有许多通用属性和事件，像焦点事件、触屏事件、点击事件等，其中点击事件大家应该最为熟悉。通常情况下，给组件设置onClick方法就能轻松实现点击功能，示例代码如下：

Button(\"点击\")
  .onClick(() => {
      console.log(\"===点击事件\");
    });

除了这种常规的系统提供的点击事件，其实还可以借助手势来实现组件的点击操作。每个组件都有onTouch方法，我们可以把手指的按下或抬起动作当作一次点击。例如：

Button(\"点击\")
  .onTouch((event) => {
      if (event.type === TouchType.Down) {
        console.log(\"===手指按下当做点击事件\");
      }
    });

这里就产生了一个有趣的问题，如果同时使用onClick和onTouch，onClick还会执行吗？如果会，执行顺序又是怎样的呢？实际上，即便两者同时使用，onClick方法依然会同步执行，而且是先执行onTouch，再执行onClick。

除了上述两种方式，还有一种实现点击的方法，这也是本文重点介绍的内容——利用单一手势中的点击手势（TapGesture）。

点击手势（TapGesture）介绍

TapGesture功能十分强大，它不仅能实现单击效果，还能完成双击、多击操作。它只有一个TapGestureParameters类型的对象参数，这个参数里有三个可选配置项，具体如下：

• count：类型为number，非必填。它用于设定识别的连续点击次数。当设置的值小于1或者不设置时，会自动转换为默认值。
• fingers：同样是number类型，也非必填。它表示触发点击的手指数，取值范围最小为1指，最大为10指。若设置的值小于1或不设置，也会被转换为默认值。
• distanceThreshold：属于number类型，同样非必填。它代表点击手势移动阈值，当设置的值小于等于0或不设置时，会采用默认值2^31 - 1。

在使用TapGesture时，需要进行事件绑定，我们通过gesture方法进行绑定，并利用onAction来触发事件。下面是一个简单示例：

Button(\"点击\")
  .gesture(TapGesture()
      .onAction((event: GestureEvent) => {
          if (event) {
            console.log(\"===单击事件\");
          }
        })
    );

不过，TapGesture的优势并不在于实现单击，毕竟实现单击用onClick就足够了，它更大的价值在于实现多次点击。

实现多次点击

通过设置count的值，就能轻松实现多次点击效果。比如，想要实现双击：

Button(\"点击\")
  .gesture(TapGesture({ count: 2 })
      .onAction((event: GestureEvent) => {
          if (event) {
            console.log(\"===双击事件\");
          }
        })
    );

在设置多次点击时，有几个要点需要注意：首先，上一次点击的最后一根手指抬起和下一次点击的第一根手指按下之间的超时时间是300毫秒；其次，若上次点击位置与当前点击位置的距离超过60vp，手势识别就会失败；另外，在多指点击的情况下，点击位置是所有参与手势响应手指的平均位置 。

实现多指点击

除了count参数，还可以利用fingers参数来实现多指点击。示例代码如下：

Button(\"点击\")
  .gesture(TapGesture({ fingers: 2 })
      .onAction((event: GestureEvent) => {
          if (event) {
            console.log(\"===2指事件\");
          }
        })
    );

在开发过程中配置多指点击时，也有一些注意事项：第一根手指按下后，如果在300毫秒内没有达到设定的手指数，手势识别会失败；手指抬起时，如果抬起后剩余的手指数小于阈值就会开始计时，若300ms内手指未全部抬起，同样会导致手势识别失败；只有实际点击的手指数超过配置值，手势才能识别成功。

相关总结

TapGesture点击手势在实际开发中，更适用于需要双击或多次点击的场景。如果只是单纯的单次点击，直接使用onClick方法会更加便捷。