当前位置：首页 > news >正文

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

news 2025/9/7 8:45:55

我们组件中会有很多通用的信息和方法

那么首先我们看通用事件通用事件中最常用的就是我们的点击事件
比如说我们之前常写的

组件.onClick(()=>{//事件逻辑
})

但是我们之前都没有用它接参数
我们可以这样

Button("跳转").onClick((ewat: ClickEvent)=>{//
})

我们on事件其实都会有一个ewat参数它能够拿到一些很有用的信息
但源码看着显然挺头疼的

其实我们可以将鼠标夏婷在某个组件上然后就会出现一个提示框我们点击如下图指向位置
在这里插入图片描述
编辑器就会打开它的一个api

选择呢我们是在说 click 左侧导航栏选择组件通用信息 > 通用事件 > 点击事件

这里告诉我们它是从 Api7 就开始支持了低于7 肯定是用不了的

这里呢会大体看出来这个组件叫什么这么用
在这里插入图片描述
至于我们关心的 event中到底有哪些属性？
这里的对象说明会给你答案

screenX和screenY 两个属性比较有趣可以拿到当元素的坐标轴

x是横向从手机最左侧开始计算越往右数值越大返回当前元素位置
y 则是竖向从手机顶部开始为0 越往下越大

我们写个比较基本的案例

@Entry
@Component
struct Index {@State text:string = "";build() {Row() {Column() {Text(this.text)Button("跳转").onClick((ewat: ClickEvent)=>{this.text = "元素y位置:"+ewat.screenY+"元素x轴位置"+ewat.screenX;})}.width('100%')}.height('100%')}
}

text开始定义为一个响应式的状态变量然后它是个空字符串
然后点击事件赋值他的 x y 位置
运行代码
在这里插入图片描述
然后我们点击按钮

这里就成功打印了它x y 针对当前窗口的坐标

当然还有很多例如高宽的属性在 ewat.target.area属性中
在这里插入图片描述
代码改成这样

@Entry
@Component
struct Index {@State text:string = "";build() {Row() {Column() {Text(this.text)Button("跳转").onClick((ewat: ClickEvent)=>{this.text = "元素高度:"+ewat.target.area.height+"元素宽度"+ewat.target.area.width;})}.width('100%')}.height('100%')}
}