【ArkTS-通用事件】-北京尧图网络

ArkTS-通用事件■ 基础输入事件■ 1. onTouch 触摸事件■ 2. onHover 鼠标悬浮■ 3. onMouse 鼠标事件■ 4. onAxisEvent 轴事件■ 5. onKeyEvent 按键事件■ 6. onDigitalCrown 表冠事件■ 7. onFocusAxisEvent 焦点轴事件■ 交互响应事件■ 1. onClick 点击事件■ 2. 拖拽事件■ 3. 焦点事件■ 4. 悬浮事件■ 5. 交互事件分发控制■ 6. 组件变化事件-挂载卸载事件■ 7. 组件变化事件■ onAreaChange 组件区域变化事件■ onSizeChange 组件尺寸变化事件■ onVisibleAreaChange 组件可见区域变化事件■ 示例1 (使用onVisibleAreaChange来监听区域变化)■ 示例2 (使用onVisibleAreaApproximateChange来监听区域变化)■ 设置事件回调■ 1. setOnClick■ 2. setOnTouch■ 3. setOnAppear■ 4. setOnDisappear■ 5. setOnKeyEvent■ 6. setOnFocus■ 7. setOnBlur■ 8. setOnHover■ 9. setOnMouse■ 10. setOnSizeChange■ 11. setOnVisibleAreaApproximateChange■ 12. HoverCallback■ 基础输入事件■ 1. onTouch 触摸事件■ 2. onHover 鼠标悬浮■ 3. onMouse 鼠标事件■ 4. onAxisEvent 轴事件轴事件指组件被鼠标滚轮滚动或触控板双指沿特定方向轴滑动时触发的事件。“轴”指二维坐标系中的方向分为水平X轴和垂直Y轴。■ 5. onKeyEvent 按键事件是指组件与键盘、遥控器等按键设备交互时触发的事件适用于所有可获焦组件例如Button。对于默认不可获焦的组件如TextImage等可以将focusable属性设置为true后使用按键事件。■ 6. onDigitalCrown 表冠事件■ 7. onFocusAxisEvent 焦点轴事件■ 交互响应事件■ 1. onClick 点击事件点击动作触发该回调。// xxx.etsEntry ComponentstructClickExample{State text:string;build(){Column(){Row({space:20}){Button(Click).width(100).height(40).id(click1).onClick((event?:ClickEvent){if(event){this.textClick Point:\n windowX:event.windowX\n windowY:event.windowY\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\n id:event.target.id\ntargetDisplayId:event.targetDisplayId\ntimestampevent.timestamp;}},20)Button(Click).width(200).height(50).id(click2).onClick((event?:ClickEvent){if(event){this.textClick Point:\n windowX:event.windowX\n windowY:event.windowY\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\n id:event.target.id\ntargetDisplayId:event.targetDisplayId\ntimestampevent.timestamp;}},20)}.margin(20)Text(this.text).margin(15)}.width(100%)}}■ 2. 拖拽事件拖拽事件是指在用户界面中当用户拖动某个对象如文件、控件或元素时触发的一系列事件。这些事件允许开发者自定义拖拽行为实现诸如拖放、调整位置等功能。属性描述onDragStartonDragEnter拖拽进入组件范围内时触发回调当监听了onDrop事件时此事件才有效。onDragMove拖拽在组件范围内移动时触发回调当监听了onDrop事件时此事件才有效。onDragLeave拖拽离开组件范围内时触发回调当监听了onDrop事件时此事件才有效。onDroponDragEndonPreDrag■ 3. 焦点事件当前组件获取焦点时触发的回调。属性描述onFocus焦点事件onBlur失去焦点时触发■ 4. 悬浮事件属性描述onHover鼠标或手写笔进入或退出组件时触发hover事件。onPreDrag■ 5. 交互事件分发控制属性描述onTouchIntercept自定义事件拦截, 给组件绑定自定义事件拦截回调。onChildTouchTest自定义事件分发, 当前组件通过设置回调可自定义触摸测试并控制触摸测试中的子节点行为。■ 6. 组件变化事件-挂载卸载事件属性描述onAttach组件挂载到组件树时触发此回调。onDetach组件从组件树卸载时触发此回调。onAppear组件挂载显示后触发此回调。onDisAppear组件从组件树卸载消失时触发此回调。■ 7. 组件变化事件■ onAreaChange 组件区域变化事件组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调// xxx.etsEntry ComponentstructAreaExample{State value:stringTextState sizeValue:stringbuild(){Column(){Text(this.value).backgroundColor(Color.Green).margin(30).fontSize(20).onClick((){this.valuethis.valueText}).onAreaChange((oldValue:Area,newValue:Area){console.info(Ace:on area change,oldValue is ${JSON.stringify(oldValue)}value is ${JSON.stringify(newValue)})this.sizeValueJSON.stringify(newValue)})Text(new area is: \nthis.sizeValue).margin({right:30,left:30})}.width(100%).height(100%).margin({top:30})}}■ onSizeChange 组件尺寸变化事件// xxx.etsEntry ComponentstructAreaExample{State value:stringTextState sizeValue:stringbuild(){Column(){Text(this.value).backgroundColor(Color.Green).margin(30).fontSize(20).onClick((){this.valuethis.valueText}).onSizeChange((oldValue:SizeOptions,newValue:SizeOptions){console.info(Ace:on size change,oldValue is ${JSON.stringify(oldValue)}value is ${JSON.stringify(newValue)})this.sizeValueJSON.stringify(newValue)})Text(new area is: \nthis.sizeValue).margin({right:30,left:30})}.width(100%).height(100%).margin({top:30})}}■ onVisibleAreaChange 组件可见区域变化事件■ 示例1 (使用onVisibleAreaChange来监听区域变化)// xxx.etsEntry ComponentstructScrollExample{scroller:ScrollernewScroller()private arr:number[][0,1,2,3,4,5,6,7,8,9]State testTextStr:stringtestState testRowStr:stringtestbuild(){Column(){Column(){Text(this.testTextStr).fontSize(20)Text(this.testRowStr).fontSize(20)}.height(100).backgroundColor(Color.Gray).opacity(0.3)Scroll(this.scroller){Column(){Text(Test Text Visible Change).fontSize(20).height(200).margin({top:50,bottom:20}).backgroundColor(Color.Green)// 通过设置ratios为[0.0, 1.0]实现当组件完全显示或完全消失在屏幕中时触发回调。.onVisibleAreaChange([0.0,1.0],(isExpanding:boolean,currentRatio:number){console.info(Test Text isExpanding: isExpanding, currentRatio:currentRatio)if(isExpandingcurrentRatio1.0){console.info(Test Text is fully visible.currentRatio:currentRatio)this.testTextStrTest Text is fully visible}if(!isExpandingcurrentRatio0.0){console.info(Test Text is completely invisible.)this.testTextStrTest Text is completely invisible}})Row(){Text(Test Row Visible Change).fontSize(20).margin({bottom:20})}.height(200).backgroundColor(Color.Yellow).onVisibleAreaChange([0.0,1.0],(isExpanding:boolean,currentRatio:number){console.info(Test Row isExpanding:isExpanding, currentRatio:currentRatio)if(isExpandingcurrentRatio1.0){console.info(Test Row is fully visible.)this.testRowStrTest Row is fully visible}if(!isExpandingcurrentRatio0.0){console.info(Test Row is completely invisible.)this.testRowStrTest Row is completely invisible}})ForEach(this.arr,(item:number){Text(item.toString()).width(90%).height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({top:10})},(item:number)(item.toString()))}.width(100%)}.backgroundColor(0x317aff).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarColor(Color.Gray).scrollBarWidth(10).onWillScroll((xOffset:number,yOffset:number,scrollState:ScrollState){console.info(xOffset yOffset)}).onScrollEdge((side:Edge){console.info(To the edge)}).onScrollStop((){console.info(Scroll Stop)})}.width(100%).height(100%).backgroundColor(0xDCDCDC)}}■ 示例2 (使用onVisibleAreaApproximateChange来监听区域变化)// xxx.etsEntry ComponentstructScrollExample{scroller:ScrollernewScroller()private arr:number[][0,1,2,3,4,5,6,7,8,9]State testTextStr:stringtestState testRowStr:stringtestbuild(){Column(){Column(){Text(this.testTextStr).fontSize(20)Text(this.testRowStr).fontSize(20)}.height(100).backgroundColor(Color.Gray).opacity(0.3)Scroll(this.scroller){Column(){Text(Test Text Visible Change).fontSize(20).height(200).margin({top:50,bottom:20}).backgroundColor(Color.Green)// 通过设置ratios为[0.0, 1.0]实现当组件完全显示或完全消失在屏幕中时触发回调。.onVisibleAreaApproximateChange({ratios:[0.0,1.0],expectedUpdateInterval:1000},(isExpanding:boolean,currentRatio:number){console.info(Test Text isExpanding: isExpanding, currentRatio:currentRatio)if(isExpandingcurrentRatio1.0){console.info(Test Text is fully visible.currentRatio:currentRatio)this.testTextStrTest Text is fully visible}if(!isExpandingcurrentRatio0.0){console.info(Test Text is completely invisible.)this.testTextStrTest Text is completely invisible}})Row(){Text(Test Row Visible Change).fontSize(20).margin({bottom:20})}.height(200).backgroundColor(Color.Yellow).onVisibleAreaChange([0.0,1.0],(isExpanding:boolean,currentRatio:number){console.info(Test Row isExpanding:isExpanding, currentRatio:currentRatio)if(isExpandingcurrentRatio1.0){console.info(Test Row is fully visible.)this.testRowStrTest Row is fully visible}if(!isExpandingcurrentRatio0.0){console.info(Test Row is completely invisible.)this.testRowStrTest Row is completely invisible}})ForEach(this.arr,(item:number){Text(item.toString()).width(90%).height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({top:10})},(item:number)(item.toString()))}.width(100%)}.backgroundColor(0x317aff).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarColor(Color.Gray).scrollBarWidth(10).onWillScroll((xOffset:number,yOffset:number,scrollState:ScrollState){console.info(xOffset yOffset)}).onScrollEdge((side:Edge){console.info(To the edge)}).onScrollStop((){console.info(Scroll Stop)})}.width(100%).height(100%).backgroundColor(0xDCDCDC)}}■ 设置事件回调设置事件回调■ 1. setOnClick■ 2. setOnTouch■ 3. setOnAppear■ 4. setOnDisappear■ 5. setOnKeyEvent■ 6. setOnFocus■ 7. setOnBlur■ 8. setOnHover■ 9. setOnMouse■ 10. setOnSizeChange■ 11. setOnVisibleAreaApproximateChange■ 12. HoverCallback

【ArkTS-通用事件】

相关推荐

Windows 11 激活完整指南：MAS 免费实现永久的 4 种方法

ccstatusline-zh 配置文件与 JSON Payload 参考指南：settings.json 字段逐项解析

洛雪音乐桌面版：跨平台免费开源音乐聚合播放器，五源合一还能接脚本

更多资讯

2026—10-27

OpenClaw 龙虾ai 实操手册，从零搭建电脑自动执行智能体

I2C/SPI 仿真：PGY-I2C/SPI-EX-PD 使用教程

中小批量 PCB 打样 + 量产一体化，这几个选厂标准一定要记牢-ZXHPCB

ubuntu系统安装和卸载软件常用指令

我的电视（my-tv）：免注册、开箱即用的电视直播软件，把老电视变成直播入口

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？