鸿蒙应用开发实战：点击和手势事件_鸿蒙import { gestureevent, gesturelistener, gesturer

在移动互联时代，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("点击父组件")          })      )

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

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/525354