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

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

相关推荐
爱笑的眼睛1110 小时前
HarmonyOS应用开发:深入探索Stage模型与ArkUI声明式开发
华为·harmonyos
HarderCoder12 小时前
重学仓颉-15网络编程完全指南
harmonyos
安卓开发者14 小时前
鸿蒙Next媒体展示组件实战:Video与动态布局全解析
华为·harmonyos·媒体
HarderCoder14 小时前
重学仓颉-14I/O 系统完全指南
harmonyos
森之鸟15 小时前
开发中使用——鸿蒙CoreSpeechKit语音识别
华为·语音识别·harmonyos
爱笑的眼睛1116 小时前
HarmonyOS 应用开发:基于API 12+的现代开发实践
华为·harmonyos
安卓开发者17 小时前
鸿蒙NEXT表单选择组件详解:Radio与Checkbox的使用指南
华为·harmonyos
爱笑的眼睛1117 小时前
HarmonyOS 应用开发深度实践:深入 Stage 模型与 ArkTS 声明式 UI
华为·harmonyos
爱笑的眼睛1117 小时前
HarmonyOS应用开发深度解析:基于Stage模型与ArkTS的现代实践
华为·harmonyos