HarmonyOS NEXT鸿蒙开发 ArkUI:触摸事件

介绍

当手指在组件上按下、滑动、抬起时触发。

是通用事件

接口

手指触摸动作触发该回调

onTouch(event: (event: TouchEvent) => void): T

TouchEvent 对象说明

  • type:TouchType 触摸事件的类型。

  • touches:Array<TouchObject> 全部手指信息。

  • changedTouches:Array<TouchObject> 当前发生变化的手指信息。

  • stopPropagation:() => void 阻塞事件冒泡。

  • preventDefault:() => void 阻止默认事件,具体功能暂未实现。

TouchObject 对象说明

  • type:TouchType 类型,触摸事件的类型。

  • id:number 手指唯一标识符。

  • x:number 触摸点相对于事件响应组件的左上角的X坐标。单位:vp

  • y:number触摸点相对于事件响应组件的左上角的Y坐标。单位:vp

  • windowX:number 触摸点相对于应用窗口左上角的X坐标。单位:vp

  • windowY:number 触摸点相对于应用窗口左上角的Y坐标。单位:vp

  • displayX:number类型,触摸点相对于应用屏幕左上角的X坐标。单位:vp

  • displayY:number类型,触摸点相对于应用屏幕左上角的Y坐标。单位:vp

  • screenX:number 类型,触摸点相对于应用窗口左上角的X坐标。单位:vp

  • screenY:number 触摸点相对于应用窗口左上角的Y坐标。单位:vp

方法

getHistoricalPoints

获取当前帧所有的历史点。不同设备每帧的触摸事件频率不同,且该接口只能在TouchEvent中调用,可以通过该接口获取触发onTouch时当前帧历史点的相关信息。onTouch一帧只会调用一次,若当前帧收到的TouchEvent大于1,会将该帧最后一个点通过onTouch返还,剩余点作为历史点。

getHistoricalPoints(): Array<HistoricalPoint>

返回值: Array<HistoricalPoint>:由历史点组成的数组。

HistoricalPoint对象说明

  • touchObject:TouchObject类型,历史点对应触摸事件的基础信息。

  • size:number 类型,历史点对应触摸事件的手指与屏幕的触摸区域大小。默认值:0

  • force:number 类型,历史点对应触摸事件的压力大小。默认值:0。取值范围:[0,65535),压力越大值越大。

  • timestamp:number 类型,历史点对应触摸事件的时间戳。触发事件时距离系统启动的时间间隔单位:ns

例子

@Entry
@Component
struct Index {
  @State text: string = ''
  @State eventType: string = ''
  build() {
    // 列示布局
    Column(){

      Button("录音")
        .width(100)
        .height(50)
        .onTouch((event?: TouchEvent) => {
          if(event){
            if (event.type === TouchType.Down) {
              this.eventType = '按下'
            }
            if (event.type === TouchType.Up) {
              this.eventType = '抬起'
            }
            if (event.type === TouchType.Move) {
              this.eventType = '按下时移动'
            }
            this.text = 'TouchType:' + this.eventType + '\n' +
              '按下后移动坐标:\n(x: '
              + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + ')\n' +
              '按钮位置:('
              + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n' +
              '按钮宽度:'
              + event.target.area.width + '\n' +
              '按钮高度:' + event.target.area.height
          }
        })

      Text(this.text)
        .width("100%")
        .border({
          width:1,
          color:Color.Black,
        })
        .padding(5)
    }.width('100%').padding(10)

  }
}

原文出处:/show_1GW2NoPBAqUm.html