HarmonyOS 5.0应用开发——使用手势事件

【高心星出品】

使用手势事件

手势事件是一种在用户界面交互中，通过检测和解释用户手指在屏幕上的触摸动作来触发特定响应的技术。

手势事件分类：

点击手势

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

点击手势支持单次点击和多次点击，拥有两个可选参数：

• count：声明该点击手势识别的连续点击次数。默认值为1，若设置小于1的非法值会被转化为默认值。如果配置多次点击，上一次抬起和下一次按下的超时时间为300毫秒。
• fingers：用于声明触发点击的手指数量，最小值为1，最大值为10，默认值为1。当配置多指时，若第一根手指按下300毫秒内未有足够的手指数按下则手势识别失败。

案例代码

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Tapgesture {
  @State message: string = 'Hello World';

  build() {
    Column(){
      Text('点击两次')
        .width('50%')
        .height(150)
        .border({width:2,color:Color.Red})
        .textAlign(TextAlign.Center)
        .gesture(
          // 一个手指头 点击两次
          TapGesture({count:2,fingers:1})
            .onAction((event:GestureEvent)=>{
              console.log('gxxt ',JSON.stringify(event))
              promptAction.showToast({message:'按钮被点击了两次！'})
            })
        )
    }
    .height('100%')
    .width('100%')
  }
}

长按手势

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

长按手势用于触发长按手势事件，拥有三个可选参数：

• fingers：用于声明触发长按手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。
• repeat：用于声明是否连续触发事件回调，默认值为false。
• duration：用于声明触发长按所需的最短时间，单位为毫秒，默认值为500。

案例代码

@Entry
@Component
struct Longpressgesture {
  @State message: string = 'Hello World';
  @State count:number=0
  build() {
    Column(){
      Text('点击次数：'+this.count)
        .width('50%')
        .height(150)
        .border({width:2,color:Color.Red})
        .textAlign(TextAlign.Center)
        .gesture(
          // 连续长按
          LongPressGesture({fingers:1,repeat:true,duration:500})
            // 连续长按开始
            .onAction((event:GestureEvent)=>{
              if(event.repeat)
              {
                this.count+=1
              }
            })
            // 连续长按结束
            .onActionEnd((event:GestureEvent)=>{
              this.count=0
            })
        )
    }
    .height('100%')
    .width('100%')
  }
}

拖动手势

PanGesture(value?:{ fingers?:number, direction?:PanDirection, distance?:number})

拖动手势用于触发拖动手势事件，滑动达到最小滑动距离（默认值为5vp）时拖动手势识别成功，拥有三个可选参数：

• fingers：用于声明触发拖动手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。
• direction：用于声明触发拖动的手势方向，此枚举值支持逻辑与（&）和逻辑或（|）运算。默认值为Pandirection.All。
• distance：用于声明触发拖动的最小拖动识别距离，单位为vp，默认值为5。

案例代码

@Entry
@Component
struct Pangesture {
  @State message: string = 'Hello World';
  // 拖动偏移量
  @State offsetx:number=0
  @State offsety:number=0
  // 组件坐标
  @State posx:number=0
  @State posy:number=0
  build() {
    Column(){
      Text('当前偏移量：\noffsetx: '+this.offsetx+'\noffsety: '+this.offsety)
        .translate({x:this.offsetx,y:this.offsety})
        .width('50%')
        .height(150)
        .border({width:2,color:Color.Red})
        .textAlign(TextAlign.Center)
        .gesture(
          PanGesture()
            .onActionStart((event:GestureEvent)=>{
              console.log('gxxt 拖动开始')
            })
            .onActionUpdate((event:GestureEvent)=>{
              // 拖动过程中计算组件坐标
              this.offsetx=event.offsetX+this.posx
              this.offsety=event.offsetY+this.posy
            })
            .onActionEnd((event:GestureEvent)=>{
              console.log('gxxt 拖动结束')
              // 拖动结束 记录当前坐标
              this.posx=this.offsetx
              this.posy=this.offsety

            })
        )
    }
    .height('100%')
    .width('100%')


  }
}

捏合手势

PinchGesture(value?:{fingers?:number, distance?:number})

捏合手势用于触发捏合手势事件，拥有两个可选参数：

• fingers：用于声明触发捏合手势所需要的最少手指数量，最小值为2，最大值为5，默认值为2。

• distance：用于声明触发捏合手势的最小距离，单位为vp，默认值为5。

  

案例代码

@Entry
@Component
struct Pinchgesture {
  @State message: string = 'Hello World';
  // 缩放比例
  @State scalvalue:number=1
  // 手指缩放比例 记录每次缩放比例最终结果
  @State pinchvalue:number=1
  build() {
    Column(){
      Image($r('app.media.app_icon'))
        .width(100)
        .height(100)
        .objectFit(ImageFit.Fill)
        .scale({x:this.scalvalue,y:this.scalvalue})
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .gesture(
      PinchGesture({fingers:2})
        .onActionStart((event:GestureEvent)=>{
          console.log('gxxt 捏合手势开始')
        })
        .onActionUpdate((event:GestureEvent)=>{
          // 捏合过程中 更新缩放比例
          this.scalvalue=event.scale*this.pinchvalue
        })
        .onActionEnd((event:GestureEvent)=>{
          // 记录下动作结束后的缩放比例
          this.pinchvalue=this.scalvalue
        })
    )
  }
}

旋转手势

RotationGesture(value?:{fingers?:number, angle?:number})

旋转手势用于触发旋转手势事件，拥有两个可选参数：

• fingers：用于声明触发旋转手势所需要的最少手指数量，最小值为2，最大值为5，默认值为2。
• angle：用于声明触发旋转手势的最小改变度数，单位为deg，默认值为1。

案例代码

@Entry
@Component
struct Rotationgesture {
  @State message: string = 'Hello World';
  // 组件旋转角度
  @State angle:number=0
  // 手势旋转角度
  @State rotatevalue:number=0
  build() {
   Column(){
     Text('旋转手势')
       .width('50%')
       .height(100)
       .border({width:3})
       .textAlign(TextAlign.Center)
       .rotate({angle:this.angle})
       .gesture(
         RotationGesture()
           .onActionStart((event:GestureEvent)=>{
             console.log('gxxt 旋转开始')
           })
           .onActionUpdate((event:GestureEvent)=>{
             this.angle=this.rotatevalue+event.angle
           })
           .onActionEnd((event:GestureEvent)=>{
             this.rotatevalue=this.angle
           })

       )
   }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

滑动手势

SwipeGesture(value?:{fingers?:number, direction?:SwipeDirection, speed?:number})

滑动手势用于触发滑动事件，当滑动速度大于100vp/s时可以识别成功，拥有三个可选参数：

• fingers：用于声明触发滑动手势所需要的最少手指数量，最小值为1，最大值为10，默认值为1。
• direction：用于声明触发滑动手势的方向，此枚举值支持逻辑与（&）和逻辑或（|）运算。默认值为SwipeDirection.All。
• speed：用于声明触发滑动的最小滑动识别速度，单位为vp/s，默认值为100。

案例代码

@Entry
@Component
struct Swipegesture {
  @State message: string = 'Hello World';
  @State speed:number=0
  @State angle:number=0
  build() {
    Column(){
      Text('滑动手势\n滑动速度： '+this.speed+'\n滑动角度：'+this.angle)
        .width('50%')
        .height(150)
        .border({width:3})
        .textAlign(TextAlign.Center)
        .gesture(

          SwipeGesture({fingers:1})
            .onAction((event:GestureEvent)=>{
              this.speed=event.speed
              this.angle=event.angle
            })
        )
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}
TextAlign.Center)
        .gesture(

          SwipeGesture({fingers:1})
            .onAction((event:GestureEvent)=>{
              this.speed=event.speed
              this.angle=event.angle
            })
        )
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}