Harmony Next - 手势的使用（一）

前言

在移动端设计中，手势操作是交互的重要组成部分，广泛应用于触摸屏设备上，它极大地提升了用户体验。用户通过手势可以直观地与设备进行互动，从而避免了传统物理按键的繁琐，增强了操作的便捷性和流畅性。

所以，我们学习鸿蒙开发，对于手势的学习也是不可绕过的一部分。在本篇文章中，我们会介绍如何对组件绑定手势，并介绍以下两种基础手势：

TapGesture：点击手势，包含单击和双击。
LongPressGesture：长按手势。

首先，我们先来看一下如何给组件绑定手势。

绑定手势

在鸿蒙操作系统中，我们可以通过以下三种方式给组件绑定手势：gesture、priorityGesture、parallelGesture。通过代码距离我们来看下这三种方式有什么区别。

gesture

最普通、通用的手势绑定函数。适用于对单一组件添加手势，不涉及同级组件或者父级组件的手势优先级、冲突等逻辑处理。示例代码如下：

less 复制代码

Text('Hello World')
  .gesture(
    TapGesture({count: 1})
      .onAction((event: GestureEvent) => {
      console.log('点击了文本');
    })
  )

上面的代码给 Text 组件添加了一个单击手势，当我们单击文本的时候会看到控制台输出：点击了文本。

priorityGesture

绑定优先识别手势，用于设置父组件的手势优先识别。示例代码如下：

scss 复制代码

Row() {
  Row().backgroundColor('red').width(50).height(50)
    .gesture(
      TapGesture({count: 1}).onAction((event: GestureEvent) => {
        console.log('点击了red');
      })
    )
}.width('100%').height(60).backgroundColor('blue').priorityGesture(
  TapGesture({count: 1}).onAction((event: GestureEvent) => {
    console.log('点击了blue');
  })
)

上面的代码绘制了两个 Row 组件，父组件是蓝色的视图，子组件为红色的视图。当我们点击子组件的时候，会优先相应父组件的手势，所以控制台会输出：点击了blue。

如果我们的父组件也是使用的 gesture 绑定手势：

scss 复制代码

Row() {
  Row().backgroundColor('red').width(50).height(50)
    .gesture(
      TapGesture({count: 1}).onAction((event: GestureEvent) => {
        console.log('点击了red');
      })
    )
}.width('100%').height(60).backgroundColor('blue').gesture(
  TapGesture({count: 1}).onAction((event: GestureEvent) => {
    console.log('点击了blue');
  })
)

点击子组件则会优先相应子组件的手势，控制台会输出 点击了red。

parallelGesture

它的效果是绑定可与子组件手势同时触发的手势。比如上面的示例代码，如果想点击子组件的时候，父子组件的手势都会触发，就需要使用 parallelGesture。示例代码如下：

scss 复制代码

Row() {
  Row().backgroundColor('red').width(50).height(50)
    .gesture(
      TapGesture({count: 1}).onAction((event: GestureEvent) => {
        console.log('点击了red');
      })
    )
}.width('100%').height(60).backgroundColor('blue').parallelGesture(
  TapGesture({count: 1}).onAction((event: GestureEvent) => {
    console.log('点击了blue');
  })
)

当我们点击子组件的时候，会同时响应父子组件的手势，所以控制台会输出：点击了red 点击了blue。

了解完如何给组件绑定手势，下面来看下具体手势的使用。

点击手势：TapGesture

对于点击手势，我们可以通过下面的两个属性来对其进行触发条件的编写：

count: 点击次数，默认值为 1。当 count 大于 1 的时候，点击间隔超时时间为 300 毫秒，失效距离为 60vp。
fingers: 触发点击的手指数，默认值为 1，最大值为 10。

成功触发点击手势之后的回调事件为：onAction。示例代码如下：

less 复制代码

Row() {}
  .width('100%').height(60).backgroundColor('blue').parallelGesture(
    TapGesture({count: 2}).onAction((event: GestureEvent) => {
      console.log('触发了双击事件');
    })
  )

当双击 Row 组件的时候会触发 TapGesture，控制台会输出：触发了双击事件。如果当前点击与上一次点击间隔超过 300 毫秒或者当前点击位置距离上次点击位置超过 60vp 均不会触发。

Tips:如果想获取当前点击的位置，可以通过 event 的 tapLocation 属性进行获取，仅支持 API 20。

LongPressGesture

长按手势可以配置的属性有下面三个：

fingers：触发长按手势的最少手指数，默认值为1。
repeat：是否连续触发回调，默认为 false。
duration：触发长按手势的最短时间，单位是毫秒，默认值为 500 毫秒。

它的回调事件有下面的三种：

onAction：长按手势识别成功的回调。
onActionEnd：长按手势结束的回调。
onActionCancel：长按手势取消的回调，不返回手势事件信息；onActionCancel(API 18+)长按手势取消的回调，返回手势事件信息。

示例代码如下：

less 复制代码

Row() {}
  .width('100%').height(60).backgroundColor('blue').parallelGesture(
    LongPressGesture({fingers: 1, repeat: false, duration: 2000}).onAction((event: GestureEvent) => {
      console.log('长按手势识别成功');
    }).onActionEnd((event: GestureEvent) => {
      console.log('长按手势结束');
    }).onActionCancel(() => {
      console.log('长按手势取消');
    })
  )

上面的代码创建了一个：一只手指长按间隔 2000 毫秒触发的长按手势，且识别成功之后不会重复调用识别成功的回调。

总结

在本篇文章中，我们讲解了如何给组件绑定手势以及 TapGesture 和 LongPressGesture 的使用。下一篇文章会介绍其余的四种手势。