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

3
A tap gesture can recognize one or more taps.
Z
zengyawen 已提交
4

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


## Required Permissions
Z
zengyawen 已提交
11 12

None
Z
zengyawen 已提交
13

Z
zengyawen 已提交
14 15 16 17 18 19

## APIs

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

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


## Events

28
| Name | Description |
Z
zengyawen 已提交
29
| -------- | -------- |
30
| onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Callback invoked when a tap gesture is recognized. |
Z
zengyawen 已提交
31 32 33 34


## Example

Z
zengyawen 已提交
35

36 37
```ts
// xxx.ets
Z
zengyawen 已提交
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
@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 已提交
59
![en-us_image_0000001256858417](figures/en-us_image_0000001256858417.gif)