HarmonyOS 组件通用属性之通用事件文档参数讲解(触摸事件)

-耿瑞-2024-01-05 12:19

好本文我们来说说触摸事件

字面意思也非常好理解就是我们手机手指触摸物体触发

我们先在编辑器组件介绍中找到这个东西的基本用法

javascript 复制代码

Button("跳转").onTouch((event: TouchEvent) => {

})

最明显的就是 event 的类型变了点击事件的是 ClickEvent 而这里是 TouchEvent

那么我们类型不同返回的这个对象内容自然也是不同的

具体的我们还是打开编辑器对组件的介绍

首先第一个 type 代表触摸事件的类型

哪具体有哪些类型呢？

我们可以如下图指向位置点进去

翻下来找到 TouchType 就是触摸事件触发类型的介绍

Down 就是我们刚按下去接触到时会触发

Up 手指触摸后松开时触发

Move 这里简单理解为拖拽是没问题的就是手指按着屏幕滑动我们开屏拖动元素时都是会接触到的

Cancel 可能有点迷惑事件取消什么叫事件取消？比如说我们触摸按错地方了手指按着移动出这个区域就会被视为取消 Cancel 就会触发

我们代码可以这样写

typescript 复制代码

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Button("跳转").onTouch((event: TouchEvent) => {
          switch (event.type) {
            case TouchType.Down:
              console.log("触摸");
              break;
            case TouchType.Up:
              console.log("手指抬起");
              break;
            case TouchType.Move:
              console.log("拖拽");
              break;
            case TouchType.Cancel:
              console.log("事件取消");
              break;
            default:
              break;
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们轻轻点一下按钮它触发了两次类型分别是

Down 和 Up

我们触摸它触发了 Down 然后放开触发了 Up

然后我们按住按钮一直往坐标拖

这样我们拖拽就也触发了

然后这个事件也能拿到元素宽高和触发事件位置的 x y轴

代码如下

typescript 复制代码

Button("跳转").onTouch((event: TouchEvent) => {
	console.log("宽度"+event.target.area.width+"高度"+event.target.area.height);
	console.log("x轴位置"+event.touches[0].x+"y轴位置"+event.touches[0].y);
})

然后随便触摸一下

HarmonyOS 组件通用属性之通用事件 文档参数讲解(触摸事件)

HarmonyOS 组件通用属性之通用事件文档参数讲解(触摸事件)