1# Gesture Modifier
2
3With the gesture modifier, you can dynamically set gestures bound to components, complete with the **if/else** syntax.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## gestureModifier
10
11gestureModifier(modifier: GestureModifier)
12
13Creates a gesture modifier.
14
15**Atomic service API**: This API can be used in atomic services since API version 12.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name  | Type                 | Mandatory| Description                                                        |
22| -------- | --------------------- | ---- | ------------------------------------------------------------ |
23| modifier | [GestureModifier](#gesturemodifier-1) | Yes  | Modifier for dynamically setting gestures bound to the current component. The **if/else** syntax is supported.<br>**modifier**: gesture modifier. You need a custom class to implement the **GestureModifier** API.|
24
25## GestureModifier
26
27You need a custom class to implement the **GestureModifier** API.
28
29### applyGesture
30applyGesture(event: UIGestureEvent): void
31
32Binds a gesture to this component.
33
34You can customize this API as required. The **if/else** syntax is supported.
35
36**Atomic service API**: This API can be used in atomic services since API version 12.
37
38**Parameters**
39
40| Name           | Type                                       | Description                                      |
41| ------------- | ----------------------------------------  | ---------------------------------------- |
42| event        | [UIGestureEvent](./ts-uigestureevent.md#uigestureevent) |  **UIGestureEvent** object, which is used to set the gesture to be bound to the component.     |
43
44## Example
45
46This example demonstrates how to dynamically set the gestures bound to a component using **gestureModifier**.
47
48```ts
49// xxx.ets
50class MyButtonModifier implements GestureModifier {
51  supportDoubleTap: boolean = true
52
53  applyGesture(event: UIGestureEvent): void {
54    if (this.supportDoubleTap) {
55      event.addGesture(
56        new TapGestureHandler({ count: 2, fingers: 1 })
57          .tag("aaa")
58          .onAction((event: GestureEvent) => {
59            console.log("button tap ")
60          })
61      )
62    } else {
63      event.addGesture(
64        new PanGestureHandler()
65          .onActionStart(()=>{
66            console.log("Pan start");
67          })
68      )
69    }
70  }
71}
72
73@Entry
74@Component
75struct Index {
76  @State modifier: MyButtonModifier = new MyButtonModifier()
77
78  build() {
79    Row() {
80      Column() {
81        Column()
82          .gestureModifier(this.modifier)
83          .width(500)
84          .height(500)
85          .backgroundColor(Color.Blue)
86      }
87      .width('100%')
88    }
89    .height('100%')
90  }
91}
92```
93