HarmonyOS Development: Single Gesture to Realize Long Press Event

Foreword

this article is based on Api13

in the previous article, we realized click and multiple click events through a single gesture. In actual development, in addition to click events, there are also common long-press events. So, in Hongmeng, how to realize it? In the previous article, we listed three ways to click events. In fact, there are many ways to implement long-press events. First of all, the system Api does not have a common event for long-press events and needs to be implemented by itself.

First of all, we can definitely think of using the onTouch method to record a time value when the finger is pressed and another time value when the finger is lifted. The latter subtracts the former. If it is greater than the long press time we define, then it is a long press event. The basic code is as follows:

Button("long click")
        .onTouch((event) => {
          if (event.type == TouchType.Down) {
            this.mDownTime = new Date().getTime()
          } else if (event.type == TouchType.Up) {
            let upTime = new Date().getTime()
            if ((upTime - this.mDownTime) > this.mLongClickTime) {

              console.log("===ong click")
            }
          }
        })

although the above code can implement a long press event, it is triggered every time the finger is lifted. What if I don't lift it? Obviously, it cannot be triggered. This is obviously a bug, so let's optimize it.

Obviously, you can't perform a long press event when the finger is raised. Can you do it when the finger is moving? Obviously, it is not possible. After all, if the finger does not move, the movement cannot be triggered. The implementation of the long press event here can only be in the finger press, that is, the down event.

In a down event, how can it be greater than the trigger time value of a long press? Here, we can use the delay setTimeout, which starts the delay directly when pressed. When it is greater than the defined long press time, it is a long press event. Here is a note, that is, if it is not greater than the long press time, the delay needs to be cleared. Otherwise, the finger will be lifted and will be executed when the time comes.

Button("ong click")
        .onTouch((event) => {
          if (event.type == TouchType.Down) {
            this.mDownTime = new Date().getTime()
            this.mLongClickId = setTimeout(() => {
              console.log("===ong click")
            }, this.mLongClickTime)
          } else if (event.type == TouchType.Up) {
            clearTimeout(this.mLongClickId)
          }
        })

Log Output

The above is to realize the long press event of a component through the onTouch gesture. In addition, we can also use the long press gesture in a single gesture. LongPressGesture to implement.

Long press gesture LongPressGesture

the three parameters are summarized as follows:

parameter Name	parameter Type	required	parameter Description
fingers	number	no	the minimum hand index that triggers a long press, with a minimum of 1 finger and a maximum of 10 fingers.Default value: 1
repeat	boolean	no	whether the event callback is continuously triggered. Default value: false
duration	number	no	the minimum time to trigger a long press, in milliseconds (ms). Default value: 500

the simple case is as follows:

Button("long click")
        .gesture(LongPressGesture()
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===long click")
            }
          })
        )

like click, gestures are bound by gesture and events are triggered by onAction.

With the repeat parameter, we can implement a continuous trigger event callback.

Button("long click")
        .gesture(LongPressGesture({ repeat: true })
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===long click")
            }
          })
        )

Of course, you can also set the shortest time to trigger a long press through duration, which is not an example here.

Related Summary

although we can realize a long press event through onTouch, if we want to realize continuous, multi-finger, it is more troublesome, far from being as simple as longpressesture, so in actual development, we still focus on longpressesture.