鸿蒙开发新手必备-如何快速实现手势使用场景

分享一下鸿蒙的手势，使用场景比较多，也是比较重要的一个功能点。

手势介绍

鸿蒙中为组件绑定不同类型的手势事件，并设置事件的响应方法。

组件通过手势事件绑定不同手势类型的手势对象，各手势对象在响应手势操作的事件回调中提供手势相关信息。

手势类型分为7中：

TapGesture 点击手势，支持单次点击、多次点击识别。
LongPressGesture 长按手势。
PanGesture 平移手势，滑动最小距离为5vp时识别成功。
PinchGesture 捏合手势。
RotationGesture 旋转手势。
SwipeGesture 滑动手势，滑动最小速度为100vp/s时识别成功。
GestureGroup 手势识别组，多种手势组合为复合手势，支持连续识别
、并行识别和互斥识别。

一、点击手势（TapGesture）

TapGesture 支持单击、双击和多次点击事件的识别。

手势接口：TapGesture(value?:{count?:number; fingers?:number})

拥有两个可选参数：

count：非必填参数，识别的连续点击次数。默认值为1，若设置小于1的非法值会被转化为默认值。如果配置多次点击，上一次抬起和下一次按下的超时时间为300毫秒，当上次点击的位置与当前点击的位置距离超过60vp时，手势识别失败。

fingers：非必填参数，触发点击的手指数量，最小值为1，最大值为10，默认值为1。当配置多指时，若第一根手指按下300毫秒内未有足够的手指数按下则手势识别失败。当实际点击手指数超过配置值时，手势识别失败。

手势事件

onAction(event: (event: GestureEvent) => void) Tap手势识别成功回调

组件上添加点击手势：

@Entry
@Component
struct TapGestureTest {
  @State value: string = ''

  build() {
    Column() {
      // 单指双击文本触发手势事件
      Text('Click twice').fontSize(28)
        .gesture(
          TapGesture({ count: 2, fingers: 1 }) // 参数1 识别的连续点击次数 参数2 触发点击的手指数量
            .onAction((event?: GestureEvent) => {
              if (event) {
                this.value = JSON.stringify(event.fingerList[0])
              }
            })
        )
      Text(this.value)
    }
    .height(200)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

如果是单机手势的效果，可以使用点击事件来替换onClick。

二、长按手势（LongPressGesture）

用于触发长按手势事件，触发长按手势的最少手指数为1，最短长按时间为500毫秒。

手势接口：LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })

当组件默认支持可拖拽时，如Text、TextInput、TextArea、HyperLink、Image和RichEditor等组件。长按手势与拖拽会出现冲突，事件优先级如下：

长按触发时间 < 500ms，长按事件优先拖拽事件响应。
长按触发时间 >= 500ms，拖拽事件优先长按事件响应。

拥有两个可选参数：

fingers：非必填参数，触发长按的最少手指数，最小为1指， 最大取值为10指。手指按下后若发生超过15px的移动，则判定当前长按手势识别失败。

repeat：非必填参数，是否连续触发事件回调。

duration：非必填参数，触发长按的最短时间，单位为毫秒（ms）。
默认值：500。设置小于等于0时，按照默认值500处理。

手势事件

onAction(event:(event?: GestureEvent) => void) 
LongPress手势识别成功回调

onActionEnd(event:(event?: GestureEvent) => void) 
LongPress手势识别成功，最后一根手指抬起后触发回调

onActionCancel(event: () => void) 
LongPress手势识别成功，接收到触摸取消事件触发回调

组件上添加长按手势：

@Entry
@Component
struct LongPressGestureTest {
  @State count: number = 0

  build() {
    Column() {
      Text('LongPress onAction:' + this.count).fontSize(28)
        // 单指长按文本触发该手势事件
        .gesture(
          LongPressGesture({ repeat: true })
            // 由于repeat设置为true，长按动作存在时会连续触发，
            // 触发间隔为duration（默认值500ms）
            .onAction((event?: GestureEvent) => {
              if (event && event.repeat) {
                this.count++
              }
            })
              // 长按动作一结束触发
            .onActionEnd(() => {
              this.count = 0
            })
        )
    }
    .height(200)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

三、拖动手势（PanGesture）

用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。

手势接口：PanGesture(value?: { fingers?: number; direction?
: PanDirection; distance?: number } | PanGestureOptions)

拥有两个可选参数：

fingers：非必填参数，触发长按的最少手指数，最小为1指， 最大取值为10指。当设置的值小于1或不设置时，会被转化为默认值。

distance：非必填参数，最小拖动识别距离，单位为vp。
默认值：5。当拖动距离的值小于等于0时，会被转化为默认值。

direction：非必填参数，触发拖动的手势方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。
默认值：PanDirection.All

手势事件

onActionStart(event: (event?: GestureEvent) => void)  
Pan手势识别成功回调。

onActionUpdate(event: (event?: GestureEvent) => void)  
Pan手势移动过程中回调。

fingerList为多根手指时，该回调监听每次只会更新一根手指的位置信息。
onActionEnd(event: (event?: GestureEvent) => void)  

Pan手势识别成功，手指抬起后触发回调。
onActionCancel(event: () => void)  

Pan手势识别成功，接收到触摸取消事件触发回调。
说明：
在窗口失焦的时候会触发。

组件上添加拖动手势：

@Entry
@Component
struct PanGestureTest {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Column() {
        Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(50)
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
      // 左右拖动触发该手势事件
      .gesture(
        PanGesture(this.panOption)
          .onActionStart((event?: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event?: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
          })
      )

      Button('修改PanGesture触发条件')
        .onClick(() => {
          // 将PanGesture手势事件触发条件改为双指以任意方向拖动
          this.panOption.setDirection(PanDirection.All)
          this.panOption.setFingers(2)
        })
    }
  }
}

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP应用开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG