HarmonyOS 鸿蒙Next基础手势：单/双/多次点击手势、长按手势、拖动手势及案例

1 TapGesture-单/双/多次点击手势 支持单击、双击和多次点击事件的识别。使用方式如下：

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

.onAction(event: (event?: GestureEvent) => void)//Tap手势识别成功回调。

count:识别的连续点击次数。当设置的值小于1或不设置时，会被转化为默认值1。 fingers:触发点击的手指数，最小为1指， 最大为10指。当设置小于1的值或不设置时，会被转化为默认值1。

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct TapGestureTest {
  @State value: string = ''

  build() {
    Column() {
      // 单指双击文本触发手势事件
      Text('点击两次触发事件').fontSize(28)
        .gesture(
          TapGesture({ count: 2 })
            .onAction(() => {
              promptAction.showToast({message:"点击两次事件"})
            })
        )
    }
    .height(200)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

2 LongPresGesture-长按手势 用于触发长按手势事件，触发长按手势的最少手指数为1，最短长按时间为500毫秒，用法如下：

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

fingers:触发长按的最少手指数，最小为1指， 最大取值为10指。默认值：1。 repeat:是否连续触发事件回调。默认值：false。 duration:触发长按的最短时间，单位为毫秒（ms）。默认值：500ms。 以上LongPressGesture执行后可以调用如下三种事件：

案例代码如下:

@Entry
@Component
struct LongPressGestureTest {
  @State count: number = 0

  build() {
    Column() {
      Text('长按计数:' + this.count).fontSize(28)
        // 单指长按文本触发该手势事件
        .gesture(
          LongPressGesture({ repeat: true })
            // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
            .onAction((event: GestureEvent) => {
              if (event.repeat) {
                this.count++
              }
            })
              // 长按动作一结束触发
            .onActionEnd(() => {
              this.count = 0
            })
        )
    }
    .height(200)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

3 PanGesture-拖动手势 PanGesture用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功，用法如下：

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

fingers:触发拖动的最少手指数，最小为1指， 最大取值为10指。默认为1。 direction:触发拖动的手势方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。默认值：PanDirection.All ，表示所有方向。具体参考：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-gestures-pangesture-0000001427744804-V3#ZH-CN_TOPIC_0000001523808626__pandirection枚举说明 distance:最小拖动识别距离，单位为vp。默认5vp。 PanGesture可以调用的事件如下：

案例代码如下：

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct PanGestureTest {

  //手势坐标
  @State offsetX: number = 0
  @State offsetY: number = 0

  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Column() {
        Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(50)
      // 左右拖动触发该手势事件
      .gesture(
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            promptAction.showToast({message:"触发 onActionStart 事件"})
          })
          .onActionUpdate((event: GestureEvent) => {
            this.offsetX = event.offsetX
            this.offsetY = event.offsetY
            promptAction.showToast({message:"触发 onActionUpdate 事件"})
          })
          .onActionEnd(() => {
            promptAction.showToast({message:"触发 onActionEnd 事件"})
          })
      )
    }
  }
}
复制
5   案例
image.png

代码实现如下：

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct GestureExample {
  @State
  offsetY:number = 0 //拖动组件Y方向offset

  @State
  text:string = '下拉刷新页面...'

  build() {
    Stack(){
      Row(){
        LoadingProgress()
          .width(32)
          .aspectRatio(1)

        Text(this.text)
          .width(120)
          .fontColor('#878787')

      }

      List(){
        ListItem(){
          Text(`${this.offsetY}`)
        }

      }.width('100%')
      .height('100%')
      .backgroundColor(Color.White)
      //拖动组件
      .translate({y:this.offsetY})
      .gesture(
        PanGesture()
          .onActionUpdate((event:GestureEvent)=>{
            //组件不能向上移动
            if(event.offsetY >0){
              this.offsetY = this.offsetY>100 ? this.offsetY+event.offsetY*0.01 : event.offsetY
              this.text = '释放立即刷新'
            }

          })
          .onActionEnd(()=>{

            //如果Y轴方向下拉太大，那么松手后先在100位置暂停1s后，再回弹
            if(this.offsetY >100){

              //先动画到100位置
              animateTo({duration:200},()=>{
                this.offsetY= 100
                this.text = "刷新中"
              })

              setTimeout(()=>{
                animateTo({duration:200},()=>{
                  this.offsetY= 0
                  this.text = ""
                })

              },1000)

            }else{
              animateTo({duration:200},()=>{
                this.offsetY= 0
              })
            }

            //设置定时，显示刷新成功
            setTimeout(()=>{
              promptAction.showToast({message:"刷新成功~"})
            },1000)

          })
      )

    }.width('100%')
    .height('100%')
    .backgroundColor('#AAA')
    .alignContent(Alignment.Top)
  }
}