鸿蒙5.0开发进阶：UI框架-ArkTS组件（自定义手势判定）

原创 于 2024-12-31 14:21:22 发布 · 685 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #鸿蒙系统 #ArkUI #ArkTS

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

自定义手势判定

为组件提供自定义手势判定能力。开发者可根据需要，在手势识别期间，决定是否响应手势。

说明

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

onGestureJudgeBegin

onGestureJudgeBegin(callback: (gestureInfo: GestureInfo, event: BaseGestureEvent) => GestureJudgeResult): T

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名参数类型必填参数描述
callback(gestureInfo: GestureInfo, event: BaseGestureEvent) => GestureJudgeResult是给组件绑定自定义手势判定回调，当绑定到该组件的手势被接受时，会触发用户定义的回调来获取结果。

返回值：

类型说明
T返回当前组件。

GestureJudgeResult11+

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
CONTINUE不影响系统手势判定流程。
REJECT对于用户自定义的手势判定结果为失败。

GestureInfo对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型描述
tagstring

手势标记。

说明：

如果未设置事件标识tag属性的情况下，此处tag不返回或者返回undefined。

typeGestureControl.GestureType

手势类型。

说明：

当手势为未暴露类型的系统内置手势事件时，type的值为-1。

isSystemGestureboolean

判断当前手势是否是组件自带的手势。

默认值：false

GestureType11+

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值描述
TAP_GESTURE0点击手势
LONG_PRESS_GESTURE1长按手势
PAN_GESTURE2拖动手势
PINCH_GESTURE3捏合手势
SWIPE_GESTURE4滑动手势
ROTATION_GESTURE5旋转手势
DRAG6拖拽
CLICK7点击

BaseEvent对象说明

名称类型描述
targetEventTarget

触发手势事件的元素对象显示区域。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

timestampnumber

事件时间戳，触发事件时距离系统启动的时间间隔。

单位：ns

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

sourceSourceType

事件输入设备。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

pressurenumber

按压的压力大小。

默认值：0

取值范围：[0,1]，典型值0.913168，压感大小与数值正相关。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

tiltXnumber

手写笔在设备平面上的投影与设备平面X轴的夹角。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

tiltYnumber

手写笔在设备平面上的投影与设备平面Y轴的夹角。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

sourceToolSourceTool

事件输入源。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

axisHorizontal12+number

水平轴值。

说明：

当前仅在由鼠标滚轮或者触控板双指滑动场景下触发的Pan手势中可以获取。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

axisVertical12+number

垂直轴值。

说明：

当前仅在由鼠标滚轮或者触控板双指滑动场景下触发的Pan手势中可以获取。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

getModifierKeyState12+(Array<string>) => bool

获取功能键按压状态。报错信息请参考以下错误码。支持功能键 'Ctrl'|'Alt'|'Shift'|'Fn'，设备外接带Fn键的键盘不支持Fn键查询。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

deviceId12+number

触发当前事件的输入设备ID。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

错误码：

以下错误码详细介绍。

错误码ID错误信息
401Parameter error. Possible causes: 1. Incorrect parameter types. 2. Parameter verification failed.

BaseGestureEvent对象说明

继承于BaseEvent。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型描述
fingerListFingerInfo[]触发事件的所有手指信息。

TapGestureEvent对象说明

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

LongPressGestureEvent对象说明

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型描述
repeatboolean是否为重复触发事件。

PanGestureEvent对象说明

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型描述
offsetXnumber手势事件x轴相对当前组件元素原始区域的偏移量，单位为vp，从左向右滑动offsetX为正，反之为负。
offsetYnumber手势事件y轴相对当前组件元素原始区域的偏移量，单位为vp，从上向下滑动offsetY为正，反之为负。
velocityXnumber获取当前手势的x轴方向速度。坐标轴原点为屏幕左上角，分正负方向速度，从左往右为正，反之为负。单位为vp/s。
velocityYnumber获取当前手势的y轴方向速度。坐标轴原点为屏幕左上角，分正负方向速度，从上往下为正，反之为负。单位为vp/s。
velocitynumber获取当前的主方向速度。为xy轴方向速度的平方和的算术平方根。单位为vp/s。

PinchGestureEvent对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

名称类型描述
scalenumber缩放比例。
pinchCenterXnumber捏合手势中心点相对于当前组件元素原始区域左上角x轴坐标，单位为vp。
pinchCenterYnumber捏合手势中心点相对于当前组件元素原始区域左上角y轴坐标，单位为vp。

RotationGestureEvent对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

名称类型描述
anglenumber

表示旋转角度，单位为deg。

说明：

角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。

SwipeGestureEvent对象说明

继承于BaseGestureEvent。可将该对象作为onGestureJudgeBegin的event参数来传递。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

名称类型描述
anglenumber

表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数，单位为deg。

说明：

角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。

speednumber滑动手势速度，即所有手指相对当前组件元素原始区域滑动的平均速度，单位为vp/s。

示例

示例1（自定义手势判定）

该示例通过配置onGestureJudgeBegin实现了对长按、滑动和拖动手势的自定义判定。

// xxx.ets
@Entry
@Component
struct Index {
  @State message: string = '';

  build() {
    Column() {
      Row({ space: 20 }) {
        Text(this.message).width(200).height(80).backgroundColor(Color.Pink)
          .fontSize(25)
      }.margin(20)
    }
    .width('100%')
    .height(200)
    .borderWidth(2)
    .onDragStart(() => {
      this.message = 'drag'
      console.log("Drag start.")
    })
    .gesture(
      TapGesture()
        .tag("tap1")// 设置点击手势标志
        .onAction(() => {
          this.message = 'tap1'
        })
    )
    .gesture(
      LongPressGesture()
        .tag("longPress1")// 设置长按手势标志
        .onAction(() => {
          this.message = 'longPress'
        })
    )
    .gesture(
      SwipeGesture()
        .tag("swipe1")// 设置滑动手势标志
        .onAction(() => {
          this.message = 'swipe1'
        })
    )
    .gesture(
      PanGesture()
        .tag("pan1")// 设置拖动手势标志
        .onActionStart(() => {
          this.message = 'pan1'
        })
    )
    .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
      // 若该手势类型为长按手势，转换为长按手势事件
      if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
        let longPressEvent = event as LongPressGestureEvent;
        console.log("repeat " + longPressEvent.repeat)
      }
      // 若该手势类型为滑动手势，转换为滑动手势事件
      if (gestureInfo.type == GestureControl.GestureType.SWIPE_GESTURE) {
        let swipeEvent = event as SwipeGestureEvent;
        console.log("angle " + swipeEvent.angle)
      }
      // 若该手势类型为拖动手势，转换为拖动手势事件
      if (gestureInfo.type == GestureControl.GestureType.PAN_GESTURE) {
        let panEvent = event as PanGestureEvent;
        console.log("velocity " + panEvent.velocity)
      }
      // 自定义判定标准
      if (gestureInfo.type == GestureControl.GestureType.DRAG) {
        // 返回 REJECT 会使拖动手势失败
        return GestureJudgeResult.REJECT;
      } else if (gestureInfo.tag == 'longPress1' && event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
        // 返回 CONTINUE 将保持系统判定。
        return GestureJudgeResult.CONTINUE;
      }
      return GestureJudgeResult.CONTINUE;
    })
  }
}

示例2（自定义区域手势判定）

该示例通过配置onGestureJudgeBegin判定区域决定长按手势和拖拽是否响应。

// xxx.ets
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller) {
      Column({ space: 8 }) {
        Text("Drag 上下两层 上层绑定长按，下层绑定拖拽。先长按后平移上半区红色区域只会响应长按，先长按后平移下半区蓝色区域只会响应拖拽").width('100%').fontSize(20).fontColor('0xffdd00')
          .backgroundColor(0xeeddaa00)
        Stack({ alignContent: Alignment.Center }) {
          Column() {
            // 模拟上半区和下半区
            Stack().width('200vp').height('100vp').backgroundColor(Color.Red)
            Stack().width('200vp').height('100vp').backgroundColor(Color.Blue)
          }.width('200vp').height('200vp')
          // Stack的下半区是绑定了拖动手势的图像区域。
          Image($r('sys.media.ohos_app_icon'))
            .draggable(true)
            .onDragStart(()=>{
              promptAction.showToast({ message: "Drag 下半区蓝色区域，Image响应" })
            })
            .width('200vp').height('200vp')
          // Stack的上半区是绑定了长按手势的浮动区域。
          Stack() {
          }
          .width('200vp')
          .height('200vp')
          .hitTestBehavior(HitTestMode.Transparent)
          .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
            // 确定tag标志是否有值
            if (gestureInfo.tag) {
              console.log("gestureInfo tag" + gestureInfo.tag.toString())
            }
            console.log("gestureInfo Type " + gestureInfo.type.toString() + " isSystemGesture " + gestureInfo.isSystemGesture);
            console.log("pressure " + event.pressure + " fingerList.length " + event.fingerList.length
            + " timeStamp " + event.timestamp + " sourceType " + event.source.toString() + " titleX " + event.tiltX + " titleY " + event.tiltY + " sourcePool " + event.sourceTool.toString());
            // 如果是长按类型手势，判断点击的位置是否在上半区
            if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
              if (event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
                return GestureJudgeResult.CONTINUE
              } else {
                return GestureJudgeResult.REJECT
              }
            }
            return GestureJudgeResult.CONTINUE
          })
          .gesture(GestureGroup(GestureMode.Parallel,
            LongPressGesture()
              .onAction((event: GestureEvent) => {
                promptAction.showToast({ message: "LongPressGesture 长按上半区 红色区域，红色区域响应" })
              })
              .tag("tap111")
          ))

        }.width('100%')
      }.width('100%')
    }
  }
}

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值