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))
          })
      )
    )