★ FEATURED ARTICLE 学习目标学习鸿蒙ArkUI 交互响应机制实现手势触屏键盘输入的交互功能学习内容1.手势识别点击双击长按拖拽捏合等2.触屏事件onTouch事件处理3.键盘输入onKeyEvent事件处理学习笔记一·手势识别1·拖拽手势PanGesture初始坐标lastX,lastY滑动坐标量offsetX,Y.gesture(PanGesture().onActionStart(() { 记录初始位置 }).onActionUpdate((event: GestureEvent) {// 实时更新坐标新坐标 初始坐标 滑动的距离this.dragX this.lastX event.offsetX;}))2.点击手势TapGesture.gesture(TapGesture({ count: 点击次数 }).onAction(() {// 双击触发效果console.info(‘’);}))3,长按手势LongPressGesture长按.gesture(LongPressGesture({ repeat: false, duration: 1000 }) // 按住1秒.onAction((event) {// 长按触发的效果this.getUIContext().showAlertDialog({ title: ‘长按触发’, message: ‘你长按了组件’ });}))4捏合手势PinchGesture双指缩放操作.gesture(PinchGesture().onActionUpdate((event: GestureEvent) {// event.scale 捏合的比例系数this.scaleValue event.scale;}))二·触屏事件onTouch手指的按下down抬起up移动move取消cancel以个人实验报告中猫猫喂食为例Image(this.currentSrc)// ….onTouch((event: TouchEvent) {if (event.type TouchType.Down) {// 手指按下图片切换为按压态this.currentSrc this.pressedImage;} else if (event.type TouchType.Up || event.type TouchType.Cancel) {// 手指抬起或取消恢复原状this.currentSrc this.defaultImage;}})三·键盘输入onKeyEvent监测键盘的按键操作1焦点机制Focus目标组件必须设置.focusable(true)和.defaultFocus(true)2.按键事件onKeyEvent当组件拥有焦点且用户按下键盘时触发。可以通过判断 event.type按下 KeyType.Down 或抬起 KeyType.Up和 event.keyCode具体按下的键值如方向键、回车键等来执行相应效果。学习产出猫猫喂食用了onTouch与PanGesture两种交互机制效果点击猫猫出现“到底在哪里能吃到”拖拽食物出现猫猫期待点击“投喂结束”出现“吃饱了喵~”。屏幕录制 2026-10-21 225755完整代码EntryComponentstruct PressToSwitchImage {defaultImage: Resource $r(‘app.media.xiaomao2’);//需要foodpressedImage: Resource $r(‘app.media.xiaomao1’);//找foodexpectImage: Resource KaTeX parse error: Expected }, got EOF at end of input: …r) Image(r(‘app.media.eat1’))//不与Column同级.width(90).height(90).translate({x: this.dragX1, y:this.dragY1}).gesture(//绑定手势PanGesture()//平移手势.onActionStart((){this.lastX1 this.dragX1;this.lastY1 this.dragY1;this.currentSrc this.expectImage//猫猫期待}).onActionUpdate((event: GestureEvent) {this.dragX1 this.lastX1event.offsetXthis.dragY1 this.lastY1event.offsetY}).onActionEnd((){this.currentSrc this.defaultImage}).onActionCancel((){this.currentSrc this.defaultImage}))Image(r ( ′ a p p . m e d i a . e a t 2 ′ ) ) . w i d t h ( 90 ) . h e i g h t ( 90 ) . t r a n s l a t e ( x : t h i s . d r a g X 2 , y : t h i s . d r a g Y 2 ) . g e s t u r e ( P a n G e s t u r e ( ) . o n A c t i o n S t a r t ( ( ) t h i s . l a s t X 2 t h i s . d r a g X 2 ; t h i s . l a s t Y 2 t h i s . d r a g Y 2 ; t h i s . c u r r e n t S r c t h i s . e x p e c t I m a g e / / 猫猫期待 ) . o n A c t i o n U p d a t e ( ( e v e n t : G e s t u r e E v e n t ) t h i s . d r a g X 2 t h i s . l a s t X 2 e v e n t . o f f s e t X t h i s . d r a g Y 2 t h i s . l a s t Y 2 e v e n t . o f f s e t Y ) . o n A c t i o n E n d ( ( ) t h i s . c u r r e n t S r c t h i s . d e f a u l t I m a g e / / 猫猫恢复 ) . o n A c t i o n C a n c e l ( ( ) t h i s . c u r r e n t S r c t h i s . d e f a u l t I m a g e / / 猫猫恢复 ) ) I m a g e ( r(app.media.eat2)) .width(90) .height(90) .translate({x: this.dragX2, y:this.dragY2}) .gesture( PanGesture() .onActionStart((){ this.lastX2 this.dragX2; this.lastY2 this.dragY2; this.currentSrc this.expectImage//猫猫期待 }) .onActionUpdate((event: GestureEvent) { this.dragX2 this.lastX2event.offsetX this.dragY2 this.lastY2event.offsetY }) .onActionEnd((){ this.currentSrc this.defaultImage//猫猫恢复 }) .onActionCancel((){ this.currentSrc this.defaultImage//猫猫恢复 }) ) Image(r(′app.media.eat2′)).width(90).height(90).translate(x:this.dragX2,y:this.dragY2).gesture(PanGesture().onActionStart(()this.lastX2this.dragX2;this.lastY2this.dragY2;this.currentSrcthis.expectImage//猫猫期待).onActionUpdate((event:GestureEvent)this.dragX2this.lastX2event.offsetXthis.dragY2this.lastY2event.offsetY).onActionEnd(()this.currentSrcthis.defaultImage//猫猫恢复).onActionCancel(()this.currentSrcthis.defaultImage//猫猫恢复))Image(r(‘app.media.eat3’)).width(90).height(90).translate({x: this.dragX3, y:this.dragY3}).gesture(PanGesture().onActionStart((){this.lastX3 this.dragX3;this.lastY3 this.dragY3;this.currentSrc this.expectImage}).onActionUpdate((event: GestureEvent) {this.dragX3 this.lastX3event.offsetXthis.dragY3 this.lastY3event.offsetY}).onActionEnd((){this.currentSrc this.defaultImage}).onActionCancel((){this.currentSrc this.defaultImage}))}}}
阅读完成 · 觉得有帮助？
