HarmonyOS/OpenHarmony应用开发-ArkTS触摸事件onTouch
一、示例效果图片
二、事件
当手指在组件上按下、滑动、抬起时触发。（api7开始支持）
|
名称 |
是否冒泡 |
功能描述 |
|
onTouch(event: (event?: TouchEvent) => void) |
是 |
触摸动作触发该方法调用，event参数见TouchEvent介绍。 |
三、说明
TouchEvent对象说明：
|
名称 |
类型 |
描述 |
|
type |
TouchType |
触摸事件的类型。 |
|
touches |
Array |
全部手指信息。 |
|
changedTouches |
Array |
当前发生变化的手指信息。 |
|
stopPropagation |
() => void |
阻塞事件冒泡。 |
|
timestamp8+ |
number |
事件时间戳。 |
|
target8+ |
EventTarget |
触发手势事件的元素对象显示区域。 |
|
source8+ |
SourceType |
事件输入设备。 |
TouchObject对象说明：
|
名称 |
类型 |
描述 |
|
type |
TouchType |
触摸事件的类型。 |
|
id |
number |
手指唯一标识符。 |
|
screenX |
number |
|
|
screenY |
number |
触摸点相对于设备屏幕上边沿的Y坐标。 |
|
x |
number |
触摸点相对于被触摸元素左边沿的X坐标。 |
|
y |
number |
触摸点相对于被触摸元素上边沿的Y坐标。 |
四、示例代码
Touch.ets
@Componentexport default struct Touch { @State text: string = ''; @State eventType: string = ''; build() { Column() { Button('Touch').height(40).width(100) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.eventType = 'Down'; } if (event.type === TouchType.Up) { this.eventType = 'no touch'; } if (event.type === TouchType.Move) { this.eventType = 'Move'; } this.text = 'TouchType:' + this.eventType + '\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.width + '\nheight:' + event.target.area.height; }) Button('Touch').height(50).width(200).margin(20) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.eventType = 'Down'; } if (event.type === TouchType.Up) { this.eventType = 'no touch'; } if (event.type === TouchType.Move) { this.eventType = 'Move'; } this.text = 'TouchType:' + this.eventType + '\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.width + '\nheight:' + event.target.area.height; }) Text(this.text).fontSize(24) }.width('100%').height('100%').padding(30) }}index.ets
import touch from '../eventMuster/Touch'@Entry@Componentstruct Index { build() { Column() { touch() } .width('100%') .height('100%') }}五、完整代码下载地址
HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com