【木棉花】学习笔记——ArkUI手势处理（eTS） 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」

前言

在应用中，我们可以用点击、双击、长按等等的方式去操作一个应用，那这些点击、双击、长按就是我们所说的手势处理。当然手势处理也不仅仅是只有这三种，而且我们还可以将这些基础手势组合起来成为一个组合手势。

正文

TapGesture

这是一个点击手势，支持单次点击和多次点击。

而在该点击手势中，只有一个事件回调函数，那就是onAction((event?: GestureEvent) => void)，当手势识别成功时回调该函数。

      Text('请双击')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          TapGesture({count:2})
            .onAction(()=>{
              console.info('TapGesture回调成功')
            })
        )

双击文本之后呢，就会在输出控制台输出 TapGesture回调成功 这样子的一句提示。

LongPressGesture

LongPressGesture是一个长按手势。

在长按手势中的回调函数就比较多一些了。

我们可以根据这个手势来写一个text来记录长按文本的一个时间

      Text('长按了'+this.presstime.toString()+'ms')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .gesture(
          LongPressGesture({repeat:true,duration:100})
            .onAction(()=>{
              this.presstime+=100
            })
            .onActionEnd(()=>{
              this.presstime = 0
              console.info("手指抬起")
            })
            .onActionCancel(()=>{
              console.info('事件取消')
            })
        )

PanGesture

PanGesture是一个平移手势。

根据可平移手势，我们就可以做出来一个可以平移的文本。

Text('可平移文本')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .translate({x:this.offsetX,y:this.offsetY})
        .gesture(
          PanGesture({direction:(PanDirection.Horizontal|PanDirection.Vertical)})
            .onActionStart(()=>{
              console.info('pan start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.offsetX = event.offsetX
              this.offsetY = event.offsetY
            })
            .onActionEnd(()=>{
              this.offsetX = 0
              this.offsetY = 0
            })
        )

我在上面平移手势中是设置可以水平或者是竖直平移，和设置任何方向都可以平移是相似的。

PinchGesture

PinchGesture是一个捏合手势。在这个捏合手势中，我们就可以去利用捏合手势去改变一张图片或者其他组件的大小。

那我们就写一个程序去通过捏合手势去放大或者缩小PinchGesture这个文本。

Text('PinchGesture')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .scale({x:this.scale,y:this.scale})
        .gesture(
          PinchGesture()
            .onActionStart(()=>{
              console.info('Pinch start')
            })
            .onActionUpdate((event:GestureEvent)=>{
              this.scale = event.scale
            })
            .onActionEnd(()=>{
              console.info('Pinch end')
            })
        )

不过由于电脑模拟器只有一个鼠标，但是要实现捏合手势需要至少两根手指，所以这个功能就需要在真机上去查看了。

RotationGesture

RotationGesture是一个旋转手势。当然要实现一个旋转手势也是最少是需要两根手指的。

那我们就在下面的程序中去实现一个用两根手指去旋转，使得RotationGesture文本也旋转。

Text('RotationGesture')
        .fontSize(45)
        .fontWeight(FontWeight.Bold)
        .margin(30)
        .rotate({angle:this.angle})
        .gesture(
          RotationGesture()
            .onActionStart(() => {
              console.log('Rotation start')
            })
            .onActionUpdate((event: GestureEvent) => {
              this.angle = event.angle
            })
            .onActionEnd(() => {
              console.log('Rotation end')
            })
        )

当然我们也可以利用以上的基础手势去组成一个组合手势，但这里就不予赘述了。

更多资料请关注我们的项目 :Awesome-HarmonyOS_木棉花

本项目会长期更新 ，希望随着鸿蒙一同成长变强的既有我们，也有正在看着这个项目的你。明年3月，深大校园内的木棉花会盛开，那时，鸿蒙也会变的更好，愿这花开，有你我的一份。