ArkTS开发系列之事件（2.8.2手势事件）

上篇回顾：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件）

本篇内容：ArkTS开发系列之事件（2.8.2手势事件）

一、绑定手势方法

1. 常规手势绑定方法

复制代码

 Text('手势').fontSize(44)
        .gesture(TapGesture().onAction((event) => {
          console.error('event: ' + JSON.stringify(event))
        }))

2. 带优先级的手势绑定方法

需要注意，子父组件绑定相同级别手势时，子组件优先响应，如果父组件绑定优先级手势方法，子组件为普通绑定手势方法，则父组件优先响应
复制代码
```
  .priorityGesture(TapGesture().onAction((event)=>{
    console.error('parentGesture: ' + JSON.stringify(event))
  }))
```

3. 并行手势绑定方法

当父组件绑定此手势方法时，父子组件可同时响应手势

复制代码

  .parallelGesture(TapGesture().onAction((event)=>{
    console.error('parent event: ' + JSON.stringify(event))
  }))

二、单一手势

1. 点击手势（tapGesture）

复制代码

      Text('手势').fontSize(44)
        .gesture(TapGesture().onAction((event) => {
          console.error('event: ' + JSON.stringify(event))
        }))

2. 长按手势（longPressGesture）

复制代码

LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})

fingers :触发最少手指数，默认1
repeat 是否连续触发默认false
duration 长按多久触发，默认500

Text('长按手势').fontSize(55)
.gesture(
LongPressGesture({fingers: 1, repeat: true, duration: 300})//fingers :触发最少手指数，默认1 repeat 是否连续触发默认false duration 长按多久触发，默认500
.onAction(event=>{
console.error('longPress: ' + JSON.stringify(event))
})
)

3. 拖动手势（PanGesture）

复制代码

PanGesture(value?:{ fingers?:number; direction?:PanDirection; distance?:number})

fingers: 触发手势最少手指数，默认1
direction：触发手势方向，默认值Pandirection.All
distance：触发手势的最少距离，单位为vp，默认5vp

有点类似于onTouch事件

复制代码

Text('拖动手势').fontSize(44)
      .gesture(
        PanGesture()
          .onActionStart(
            event => {
              console.error('Pan start: ' + JSON.stringify(event))
            }
          )
          .onActionUpdate(
            event => {
              console.error('Pan update: ' + JSON.stringify(event))
            }
          )
          .onActionEnd(
            event => {
              console.error('Pan end: ' + JSON.stringify(event))
            }
          )
          .onActionCancel(
            () => {
              console.error('Pan cancel: ')
            }
          )
      )

4. 撮合手势（PinchGesture)

复制代码

PinchGesture(value?:{fingers?:number; distance?:number})

fingers: 触发手势最少手指数，默认2, 最大值为5

distance：触发手势的最少距离，单位为vp，默认5vp

复制代码

    Text('撮合手势').fontSize(44)
      .gesture(
        PinchGesture()
          .onActionStart(
            event => {
              console.error('Pinch start: ' + JSON.stringify(event))
            }
          )
          .onActionUpdate(
            event => {
              console.error('Pinch update: ' + JSON.stringify(event))
            }
          )
          .onActionEnd(
            event => {
              console.error('Pinch end: ' + JSON.stringify(event))
            }
          )
          .onActionCancel(
            () => {
              console.error('Pinch cancel: ')
            }
          )
      )

5. 旋转手势（RotationGesture)

复制代码

RotationGesture(value?:{fingers?:number; angle?:number})

fingers: 触发手势最少手指数，默认2, 最大值为5
angle: 触发手势的最小改变度数，单位是deg，默认为1deg

Text().fontSize(44)
.gesture(
RotationGesture({fingers:2})
.onActionStart(
event => {
console.error('Rotation start: ' + JSON.stringify(event))
}
)
.onActionUpdate(
event => {
console.error('Rotation update: ' + JSON.stringify(event))
}
)
.onActionEnd(
event => {
console.error('Rotation end: ' + JSON.stringify(event))
}
)
.onActionCancel(
() => {
console.error('Rotation cancel: ')
}
)
)

6. 滑动手势（SwipeGesture)

复制代码

SwipeGesture(value?:{fingers?:number; direction?:SwipeDirection; speed?:number})

fingers: 触发手势最少手指数，默认1, 最大值为10
direction: 触发手势的方向默认值是 SwipeDirection.All

speed: 触发手势的最小滑动速度，单位为vp/s，默认值为100vp/s

复制代码

  .gesture(
    SwipeGesture({ direction: SwipeDirection.Vertical })
      .onAction(event => {
        console.error('Swipe : ' + JSON.stringify(event))
      })
  )

三、组合手势

复制代码

GestureGroup(mode:GestureMode, ...gesture:GestureType[])

mode: 声明组合手势的类型
gesture：手势数组

1. 顺序组合

复制代码

    .gesture(
      GestureGroup(GestureMode.Sequence,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )

2. 并行组合

复制代码

    .gesture(
      GestureGroup(GestureMode.Parallel,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )

3. 互斥组合

复制代码

    .gesture(
      GestureGroup(GestureMode.Exclusive,
        SwipeGesture({ direction: SwipeDirection.Vertical })
          .onAction(event => {
            console.error('Swipe : ' + JSON.stringify(event))
          }),
        LongPressGesture()
          .onAction(event => {
            console.error('longPress : ' + JSON.stringify(event))
          })
      )
    )