HarmonyOS NEXT鸿蒙开发 ArkUI:触摸事件 作者:马育民 • 2025-12-10 19:56 • 阅读:10006 # 介绍 当手指在组件上按下、滑动、抬起时触发。 是通用事件 # 接口 手指触摸动作触发该回调 ``` onTouch(event: (event: TouchEvent) => void): T ``` # TouchEvent 对象说明 - type:`TouchType` 触摸事件的类型。 - touches:`Array` 全部手指信息。 - changedTouches:`Array` 当前发生变化的手指信息。 - 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 ``` **返回值:** `Array`:由历史点组成的数组。 ### 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) } } ``` 原文出处:http://www.malaoshi.top/show_1GW2NoPBAqUm.html