文章目录
[1.2 拖拽事件](#1.2 拖拽事件)
[1.3 触摸事件](#1.3 触摸事件)
前言
上文详细学习了鸿蒙开发UI页面见的动画，了解了页面间动画的两种形式，一种用于页面间有相同元素场景，另一种是应用于页面转场时，随着一个页面出现另一个页面消失产生转场效果的场景。同时详细学习了页面进入时的和退出时分别对应的两种RouteType的类型的设置方式很效果，本文将学习鸿蒙开发UI交互事件相关知识
一、交互事件概述
二、通用事件
1.触屏事件
触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件
1.1点击事件
当发生点击事件时，会触发以下回调函数
onClick(event: (event?: ClickEvent) => void)
event参数提供点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源
1.2 拖拽事件
拖拽事件触发流程
拖拽事件的触发通过长按、拖动平移判定，手指平移的距离达到5vp即可触发拖拽事件。
ArkUI支持应用内、跨应用的拖拽事件
拖拽事件相关接口
| 接口名称 | 描述 |
|---|---|
| onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo) | 拖拽启动接口。当前仅支持自定义pixelmap和自定义组件。 |
| onDragEnter(event: (event?: DragEvent, extraParams?: string) => void) | 拖拽进入组件接口。DragEvent定义拖拽发生位置，extraParmas表示用户自定义信息 |
| onDragLeave(event: (event?: DragEvent, extraParams?: string) => void) | 拖拽离开组件接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。 |
| onDragMove(event: (event?: DragEvent, extraParams?: string) => void) | 拖拽移动接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。 |
| onDrop(event: (event?: DragEvent, extraParams?: string) => void) | 拖拽释放组件接口。DragEvent定义拖拽发生位置，extraParmas表示拖拽事件额外信息。 |
1.3 触摸事件
当按下（Down）、滑动（Move）、抬起（Up）等触摸事件触发时，调用回调函数
//event.type
//TouchType.Down：表示手指按下。
//TouchType.Up：表示手指抬起。
//TouchType.Move：表示手指按住移动。
onTouch(event: (event?: TouchEvent) => void)
触摸事件可以同时多指触发，通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息
代码示例
@Entry
@Component
struct TouchExample {
//step1：定义状态变量text用于Text组件文本显示
@State text: string = '';
//step2：定义状态变量eventTypes用于接收触摸事件类型
@State eventType: string = '';
build() {
Column() {
Button('Touch').height(40).width(100)
//step3：通过onTouch定义Button组件的触摸事件响应逻辑
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
this.eventType = 'Down';
}
if (event.type === TouchType.Up) {
this.eventType = 'Up';
}
if (event.type === TouchType.Move) {
this.eventType = 'Move';
}
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\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)
}.width('100%').padding(30)
}
}
总结
本文学习了鸿蒙开发UI交互事件的类型，详细学习了通用事件的触屏事件，下文将学习通用事件中的键鼠事件和焦点事件。