学习目标：

学习鸿蒙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两种交互机制
效果：点击猫猫出现“到底在哪里能吃到”，拖拽食物出现猫猫期待，点击“投喂结束”出现“吃饱了，喵~”。

完整代码：
@Entry
@Component
struct PressToSwitchImage {
defaultImage: Resource = $r(‘app.media.xiaomao2’);//需要food
pressedImage: Resource = $r(‘app.media.xiaomao1’);//找food
expectImage: 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.lastX1+event.offsetX
this.dragY1 = this.lastY1+event.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.lastX2+event.offsetX this.dragY2 = this.lastY2+event.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.lastX2=this.dragX2;this.lastY2=this.dragY2;this.currentSrc=this.expectImage//猫猫期待).onActionUpdate((event:GestureEvent)=>this.dragX2=this.lastX2+event.offsetXthis.dragY2=this.lastY2+event.offsetY).onActionEnd(()=>this.currentSrc=this.defaultImage//猫猫恢复).onActionCancel(()=>this.currentSrc=this.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.lastX3+event.offsetX
this.dragY3 = this.lastY3+event.offsetY
})
.onActionEnd(()=>{
this.currentSrc =this.defaultImage
})
.onActionCancel(()=>{
this.currentSrc= this.defaultImage
})
)
}
}
}