鸿蒙应用开发实战：点击和手势事件

在移动互联时代，app有非常多的交互方式，除了传统的点击事件之外，还有双击、长按、拖拽、捏合等等等等。今天跟大家分享一些常见的手势交互。

触屏事件（onClick）

首先最常见的就是单次点击事件onClick：

onClick(event: (event?: ClickEvent) => void)

其中event为非必填参数，它提供了点击事件相对于窗口或组件的坐标位置，以及发生点击的事件源。

onClick不仅可以在Button组件使用，Text、Image等组件都可以使用。举个例子：

Image('/image/blackChess.png')        .width(40)        .height(40)        .position({x:100,y:100})        .onClick((event)=>{           console.log("event.x:",event.x)          console.log("event.screenX:",event.screenX)          console.log("event.target.area.globalPosition.x:",event.target.area.globalPosition.x)          console.log("event.target.area.position.x:",event.target.area.position.x)        })

点击手势（TapGesture）

TapGesture(value?:{count?:number; fingers?:number})

TapGesture在开发中使用频率也是非常高，它的两个参数count和fingers分别代表点击次数和点击的手指数。都是非必填选项，不填写时默认为1。

用法示例：

Text('Click twice').fontSize(28)        .gesture(          TapGesture({ count: 2 })            .onAction((event: GestureEvent) => {              console.log("双击事件")            }))

长按手势（LongPressGesture）

LongPressGesture(value?:{fingers?:number; repeat?:boolean; duration?:number})

解释一下LongPressGesture的三个参数：

fingers：触发长按手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。

repeat：是否连续触发事件回调，默认值为false。

duration：触发长按所需的最短时间，单位为毫秒，默认值为500。

用法示例：

Text('LongPress OnAction:' + this.count).fontSize(28)        .gesture(          LongPressGesture({ repeat: true })            .onAction((event: GestureEvent) => {              console.log("长a按事件")            })        )

拖动手势（PanGesture）

PanGestureOptions(value?:{ fingers?:number; direction?:PanDirection; distance?:number})

拖动手势中的fingers是手指数量，direction为拖动的方向，distance为拖动的距离。

用法示例：

Text('拖动事件')        .gesture(          PanGesture({fingers:1,direction:PanDirection.All,distance:5})            .onActionStart(()=>{              console.log("拖动开始")            })            .onActionUpdate((event)=>{              console.log("位置信息：",event.offsetX)            })            .onActionEnd(()=>{              console.log("拖动结束")            })        )

以上就是开发中比较常见的手势交互事件，除此之外还有捏合事件、旋转事件等等，不再一一赘述。

优先级问题

另一个比较常见的问题就是当父组件和子组件的都有手势事件时的冲突问题，比如：

Column(){        Text("子组件点击")          .gesture(            TapGesture()              .onAction(()=>{                console.log("点击子组件")              })          )      }      .gesture(        TapGesture()          .onAction(()=>{            console.log("点击父组件")          })      )

这时候会优先响应子组件：

那么当我们需要优先响应父组件的时候，可以将父组件的gesture换为priorityGesture即可解决：

Column(){        Text("子组件点击")          .gesture(            TapGesture()              .onAction(()=>{                console.log("点击子组件")              })          )      }      //这里将.gesture换成.priorityGesture      .priorityGesture(        TapGesture()          .onAction(()=>{            console.log("点击父组件")          })      )

最后，为了能够让大家跟上互联网时代的技术迭代，赶上互联网开发人员寒冬期间一波红利，在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！！

 🚀写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新VIP学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料