pc主页网站建设,企业摄影网站模板,这样做微信网站,湖南seo网站多少钱文章目录 前言一、点击事件1.1 基础介绍1.2 ClickEvent对象说明1.3 示例代码 二、触摸事件2.1 基础介绍2.2 ClickEvent对象说明2.3 示例代码 二、焦点事件2.2 基础介绍3.2 示例代码 总结 前言
在我们的ArkTS中有一些通用的事件#xff0c;他们在所有的组件中都可以用#xf… 文章目录 前言一、点击事件1.1 基础介绍1.2 ClickEvent对象说明1.3 示例代码 二、触摸事件2.1 基础介绍2.2 ClickEvent对象说明2.3 示例代码 二、焦点事件2.2 基础介绍3.2 示例代码 总结 前言
在我们的ArkTS中有一些通用的事件他们在所有的组件中都可以用所以我们需要来学习一下。 获得更好的开发体验和效率 一、点击事件
1.1 基础介绍
组件被点击时触发的事件。
名称支持冒泡功能描述onClick(event: (event?: ClickEvent) void)否点击动作触发该回调event返回值见ClickEvent对象说明。从API version 9开始该接口支持在ArkTS卡片中使用。
1.2 ClickEvent对象说明
名称类型描述screenXnumber点击位置相对于应用窗口左上角的X坐标。screenYnumber点击位置相对于应用窗口左上角的Y坐标。xnumber点击位置相对于被点击元素左上角的X坐标。ynumber点击位置相对于被点击元素左上角的Y坐标。timestampnumber事件时间戳。触发事件时距离系统启动的时间间隔单位纳秒。targetEventTarget触发事件的元素对象显示区域。sourceSourceType事件输入设备。
1.3 示例代码
// xxx.ets
Entry
Component
struct ClickExample {State text: string build() {Column() {Row({ space: 20 }) {Button(Click).width(100).height(40).onClick((event: ClickEvent) {this.text Click Point: \n screenX: event.screenX \n screenY: event.screenY \n x: event.x \n y: event.y \ntarget: \n component globalPos:( event.target.area.globalPosition.x , event.target.area.globalPosition.y )\n width: event.target.area.width \n height: event.target.area.height \ntimestamp event.timestamp;})Button(Click).width(200).height(50).onClick((event: ClickEvent) {this.text Click Point: \n screenX: event.screenX \n screenY: event.screenY \n x: event.x \n y: event.y \ntarget: \n component globalPos:( event.target.area.globalPosition.x , event.target.area.globalPosition.y )\n width: event.target.area.width \n height: event.target.area.height \ntimestamp event.timestamp;})}.margin(20)Text(this.text).margin(15)}.width(100%)}
}二、触摸事件
2.1 基础介绍
组件被点击时触发的事件。
名称支持冒泡功能描述onTouch(event: (event?: TouchEvent) void)是手指触摸动作触发该回调event返回值见TouchEvent介绍。
2.2 ClickEvent对象说明
名称类型描述typeTouchType触摸事件的类型。touchesArrayTouchObject全部手指信息。changedTouchesArrayTouchObject当前发生变化的手指信息。stopPropagation() void阻塞事件冒泡。timestampnumber事件时间戳。触发事件时距离系统启动的时间间隔单位纳秒。targetEventTarget触发事件的元素对象显示区域。sourceSourceType事件输入设备。
2.3 示例代码
// xxx.ets
Entry
Component
struct TouchExample {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 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})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 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)}
}二、焦点事件
2.2 基础介绍
焦点事件指页面焦点在可获焦组件间移动时触发的事件组件可使用焦点事件来处理相关逻辑。
名称支持冒泡功能描述onFocus(event: () void)否当前组件获取焦点时触发的回调。onBlur(event:() void)否当前组件失去焦点时触发的回调。
3.2 示例代码
// xxx.ets
Entry
Component
struct FocusEventExample {State oneButtonColor: string #FFC0CBState twoButtonColor: string #87CEFAState threeButtonColor: string #90EE90build() {Column({ space: 20 }) {// 通过外接键盘的上下键可以让焦点在三个按钮间移动按钮获焦时颜色变化失焦时变回原背景色Button(First Button).backgroundColor(this.oneButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true).onFocus(() {this.oneButtonColor #FF0000}).onBlur(() {this.oneButtonColor #FFC0CB})Button(Second Button).backgroundColor(this.twoButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true).onFocus(() {this.twoButtonColor #FF0000}).onBlur(() {this.twoButtonColor #87CEFA})Button(Third Button).backgroundColor(this.threeButtonColor).width(260).height(70).fontColor(Color.Black).focusable(true).onFocus(() {this.threeButtonColor #FF0000}).onBlur(() {this.threeButtonColor #90EE90})}.width(100%).margin({ top: 20 })}
}总结
以上就是今天要讲的内容本文仅仅简单介绍了点击、触摸、焦点事件而ArkTS还提供了其他函数有兴趣地可以自行去看官方文档
