HarmonyOS development: single gesture to achieve multiple click events

Foreword

this article is based on Api13

in addition to many common attributes, each component also has many common events, such as Focus events, touch screen events, click events, etc., presumably everyone is most familiar with click events, just set the onClick method directly to the component.

Button("click")
        .onClick(() => {
          console.log("===click")
        })

In addition to the click events provided by the above system, what other methods can you use to realize the Click operation of the components? Smart students can certainly think of gestures. Each component also has an onTouch method. We can use finger pressing or lifting as a click operation.

Button("click")
        .onTouch((event) => {
          if (event.type == TouchType.Down) {
            console.log("===click")
          }
        })

So, both are used at the same time. Let's guess whether onClick will still be executed. If it will be executed, who will come first and who will come after?

Even if they are used together, the onClick method will execute synchronously, going through onTouch first and then onClick.

Apart from the above two click events, is there any other way to realize it? Obviously there is, this is the knowledge point to be outlined in this article, the click gesture in a single gesture.

Tap gesture

TapGesture can not only realize the effect of clicking, but also realize the effect of double-clicking and multi-clicking, it has only one object parameter tapGestureParameters, which has three parameters to choose from:

name	type	required	description
count	number	No	number of consecutive hits identified. When the set value is less than 1 or not set, it will be converted to the default value.
fingers	number	no	the hand index that triggers the click, with a minimum of 1 finger and a maximum of 10 fingers. When the value is less than 1 or not set, it will be converted to the default value.
distanceThreshold	number	no	tap gesture movement threshold. When the set value is less than or equal to 0 or not set, it will be converted to the default value.Default: 2 ^ 31-1

Use tapGesture, you must bind the event, here we use the gesture is bound and passed. onAction to trigger the event, the simple case is as follows:

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

the purpose of TapGesture is not only a single click event, after all, if it is a click, we can use onClick completely, it is more to achieve multiple clicks.

Achieve multiple clicks

Button("click")
        .gesture(TapGesture({ count: 2 })
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===double")
            }
          })
        )

Above, we have achieved a double-click effect through count. Of course, you can also assign a larger number to achieve the number of clicks you want. It should be noted that, first, when configuring multiple clicks, the timeout between the last finger lift and the first finger press is 300 milliseconds. The second is, when the position of the last click is more than 60vp from the position of the current click, the gesture will fail to be recognized. In the case of multi-finger, the position of the click is the average position of all participating fingers in response to the gesture.

Achieve multi-finger click

in addition to count controlling the number of clicks, you can use the fingers parameter implements a multi-finger click.

 Button("click")
        .gesture(TapGesture({ fingers: 2 })
          .onAction((event: GestureEvent) => {
            if (event) {
              console.log("===2")
            }
          })
        )

It should be noted that, when you configure multiple fingers during development, if there is not enough hand Index to press within 300 milliseconds after the first finger is pressed, gesture recognition will fail. When your finger is lifted, the timing will start when the remaining hand index after lifting is less than the threshold. If not all of them are lifted within 300ms, gesture recognition will fail. There is also the fact that when the actual clicked hand index exceeds the configured value, gesture recognition will be successful.

Related Summary

in actual development, TapGesture is more used in double-click or scenarios that require multiple clicks. If it is only a single click, it is recommended that you directly use onClick.

Finally, let me ask you a question, through gesture after the gesture is bound, the onClick method is also implemented, so how will the two click events be executed? Is it just onClick or just gesture, or will both go?