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

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

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

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

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_SDK6 小时前
Account Kit(华为账号服务)再进化,开发者接入效率飙升!
harmonyos
whysqwhw13 小时前
鸿蒙 任意类型转字符串
harmonyos
程序员潘Sir15 小时前
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
harmonyos·鸿蒙
高心星1 天前
鸿蒙5.0应用开发——V2装饰器@Provider和@Consumer的使用
harmonyos
ChinaDragon1 天前
HarmonyOS:ArkTS卡片页面刷新
harmonyos
HMSCore2 天前
通知语音播报功能,解锁全新体验
harmonyos
HarmonyOS_SDK2 天前
通知语音播报功能,解锁全新体验
harmonyos
高心星2 天前
鸿蒙5.0应用开发——V2装饰器@ObservedV2和@Trace的使用
harmonyos