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

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

相关推荐
万少9 小时前
十行代码 带你极速接入鸿蒙6新特性 - 应用内打分评价
前端·harmonyos
LL_Z10 小时前
async/await
harmonyos
科技快报11 小时前
全新尚界H5凭借HUAWEI XMC数字底盘引擎技术,让湿滑路面也“稳”操胜券
华为·harmonyos
猫林老师11 小时前
实战:基于HarmonyOS 5构建分布式聊天通讯应用
分布式·wpf·harmonyos
2501_9197490314 小时前
鸿蒙:使用animation或animateTo实现图片无限旋转效果
华为·harmonyos
安卓开发者14 小时前
鸿蒙NEXT分布式文件系统:开启跨设备文件访问新时代
华为·harmonyos
程序员潘Sir16 小时前
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
harmonyos·鸿蒙
阿里云云原生1 天前
移动端性能监控探索:鸿蒙 NEXT 探针架构与技术实现
华为·架构·harmonyos
35186803991 天前
鸿蒙音乐应用开发:打造跨设备的音乐体验
华为·harmonyos