Harmony Next - 手势的使用（二）

前言

在上一篇文章中，我们介绍了三种给组件绑定手势的方式，以及 TapGesture 和 LongPressGesture 的使用，在本篇文章中，我们将继续介绍剩余的四种手势：

PanGesture：滑动手势（最小距离触发）。
PinchGesture：捏合手势。
RotationGesture：旋转手势。
SwipeGesture：滑动手势（最小速度触发）。

PanGesture

滑动手势可以配置的属性有以下的三个：

fingers：触发滑动的最少手指数，默认值为1 ，取值范围是 1 到 10。
direction：手势滑动的方向，支持逻辑与和逻辑或。
- All：所有方向。
- Horizontal：水平方向。
- Vertical：垂直方向。
- Left：向左滑动。
- Right：向右滑动。
- Up：向上滑动。
- Down：向下滑动。
- None：任何方向都不触发。
distance：触发滑动手势的最小滑动距离，手写笔默认值：8，其余输入源默认值：5。

滑动手势的回调有下面的四种：

onActionStart：滑动手势识别成功回调。
onActionUpdate：滑动手势更新回调。
onActionEnd：滑动手势结束回调。
onActionCancel：滑动手势取消回调，不返回手势事件；onActionCancel(API 18+)：滑动手势取消回调，返回手势事件；

下面通过示例代码来看下，PanGesture 是如何使用的：

less 复制代码

Row() {}
  .width('100%').height(60).backgroundColor('blue').parallelGesture(
    PanGesture({fingers: 1, direction: PanDirection.Left}).onActionStart((event: GestureEvent) => {
      console.log('触发了滑动事件');
    }).onActionEnd((event: GestureEvent) => {
      console.log('结束了滑动事件');
    }).onActionUpdate((event: GestureEvent) => {
      console.log('滑动事件更新');
    }).onActionCancel(() => {
      console.log('滑动事件取消');
    })
  )

上述代码给 Row 组件绑定了一个一只手指，向左方向触发滑动事件，当事件触发后，控制台会按照 onActionStart -> onActionUpdate（会随着更新一直输出） -> onActionEnd 的顺序输出日志。

PinchGesture

捏合手势可以配置的属性只有下面的两个：

fingers：触发捏合手势的最少手指数，默认值为 2。
distance：最小的识别距离，单位是 vp，默认值为 5。

捏合手势的回调有下面的四种：

onActionStart：捏合手势识别成功回调。
onActionUpdate：捏合手势更新回调。
onActionEnd：捏合手势结束回调。
onActionCancel：捏合手势取消回调，不返回手势事件；onActionCancel(API 18+)：捏合手势取消回调，返回手势事件；

示例代码如下：

less 复制代码

struct Index {
  @State scaleValue: number = 1;
  @State pinchValue: number = 1;
  @State pinchX: number = 0;
  @State pinchY: number = 0;

  build() {
    Column() {
      Row() {}
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin({ top: 100 })
      .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
      .gesture(
        PinchGesture({ fingers: 2 })
          .onActionStart((event: GestureEvent) => {
            console.info('触发了捏合');
          })
          .onActionUpdate((event: GestureEvent) => {
            console.info('触发了捏合移动');
          })
          .onActionEnd((event: GestureEvent) => {
            this.pinchValue = this.scaleValue
            console.info('捏合结束')
          })
      )
    }
    .height('100%')
    .width('100%')
  }
}

上述代码实现了通过两个手指来进行组件的缩放。

RotationGesture

旋转手势可以配置的属性也是只有两个：

fingers：触发旋转手势的最少手指数，默认值为 2。
angle：触发旋转手势最小的角度变化，单位是 deg，默认值为 1。

旋转手势的回调有下面的四种：

onActionStart：旋转手势识别成功回调。
onActionUpdate：旋转手势移动过程中回调。
onActionEnd：旋转手势结束回调。
onActionCancel：旋转手势取消回调，不返回手势事件；onActionCancel(API 18+)：旋转手势取消回调，返回手势事件；

示例代码如下：

scss 复制代码

struct Index {
  @State angle: number = 0;
  build() {
    Column() {
      Row() {}
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(80)
      .rotate({ angle: this.angle })
      .gesture(
        RotationGesture()
          .onActionStart((event: GestureEvent) => {
            console.info('触发了旋转');
          })
          .onActionUpdate((event: GestureEvent) => {
            console.info('触发了旋转移动');
          })
          .onActionEnd((event: GestureEvent) => {
            console.info('旋转结束')
          })
      )
    }
    .height('100%')
    .width('100%')
  }
}

上述代码实现了通过双指来进行组件的旋转。

SwipeGesture

滑动手势可以配置的属性有以下的三个：

fingers：触发滑动的最少手指数，默认值为1 ，取值范围是 1 到 10。
direction：手势滑动的方向。
- All：所有方向。
- Horizontal：水平方向，手指滑动方向与x轴夹角小于45度时触发。
- Vertical：竖直方向，手指滑动方向与y轴夹角小于45度时触发。
- None：任何方向都不触发。
speed：触发滑动手势的最小滑动速度，默认值 100vp/s。

它的触发事件回调只有一个：onAction。

示例代码如下：

scss 复制代码

struct Index {
  build() {
    Column() {
      Row() {}
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(80)
      .gesture(
        SwipeGesture({ direction: SwipeDirection.Horizontal, fingers: 1 })
          .onAction((event: GestureEvent) => {
            console.log('触发了滑动事件');
          })
      )
    }
    .height('100%')
    .width('100%')
  }
}

上述代码实现了组件的水平方向、一只手指触发的滑动事件。