ts-basic-gestures-tapgesture.md 1.9 KB
Newer Older
Z
zengyawen 已提交
1
# TapGesture
Z
zengyawen 已提交
2

E
ester.zhou 已提交
3
**TapGesture** is used to trigger a tap gesture with one or more taps.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5
>  **NOTE**
6
>
E
ester.zhou 已提交
7
>  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
8

Z
zengyawen 已提交
9 10 11

## APIs

E
ester.zhou 已提交
12
TapGesture(value?: { count?: number, fingers?: number })
Z
zengyawen 已提交
13

E
ester.zhou 已提交
14 15 16 17 18 19
**Parameters**

| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| count | number | No| Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.<br>Default value: **1**<br>> **NOTE**<br>> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.|
| fingers | number | No| Minimum number of fingers to trigger a tap. The value ranges from 1 to 10.<br>Default value: **1**<br>> **NOTE**<br>> 1. When multi-finger is configured, the gesture will fail to be recognized if the number of fingers used for tapping is less than the configured number within 300 ms after the first finger is tapped.<br>> 2. The gesture will fail to be recognized if the number of fingers used for tapping exceeds the configured number.|
Z
zengyawen 已提交
20 21 22 23


## Events

E
ester.zhou 已提交
24
| Name| Description|
Z
zengyawen 已提交
25
| -------- | -------- |
E
ester.zhou 已提交
26
| onAction(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a tap gesture is recognized.|
Z
zengyawen 已提交
27 28 29 30


## Example

31 32
```ts
// xxx.ets
Z
zengyawen 已提交
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
@Entry
@Component
struct TapGestureExample {
  @State value: string = ''

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Click twice')
      Text(this.value)
    }
    .height(200).width(300).padding(60).border({ width: 1 }).margin(30)
    .gesture(
      TapGesture({ count: 2 })
        .onAction(() => {
          this.value = 'TapGesture onAction'
        })
    )
  }
}
```

Z
zengyawen 已提交
54
![en-us_image_0000001256858417](figures/en-us_image_0000001256858417.gif)