【ArkTS-通用事件】-恒创新域建站

★ FEATURED ARTICLE

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

阅读完成 · 觉得有帮助？

咨询建站