• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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): T
12
13Creates a gesture modifier.
14
15>  **NOTE**
16>
17>  **gestureModifier** does not support custom components.
18
19**Atomic service API**: This API can be used in atomic services since API version 12.
20
21**System capability**: SystemCapability.ArkUI.ArkUI.Full
22
23**Parameters**
24
25| Name  | Type                 | Mandatory| Description                                                        |
26| -------- | --------------------- | ---- | ------------------------------------------------------------ |
27| 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.|
28
29**Return value**
30
31| Type| Description|
32| -------- | -------- |
33| T | Current component.|
34
35## GestureModifier
36
37You need a custom class to implement the **GestureModifier** API.
38
39### applyGesture
40applyGesture(event: UIGestureEvent): void
41
42Binds a gesture to this component.
43
44You can customize this API as required. Dynamic configuration using the **if/else** syntax is supported. If gesture switching is triggered during an active gesture operation, the new configuration will take effect in the subsequent gesture interaction after all fingers are lifted from the current gesture.
45
46**Atomic service API**: This API can be used in atomic services since API version 12.
47
48**Parameters**
49
50| Name           | Type                                       | Description                                      |
51| ------------- | ----------------------------------------  | ---------------------------------------- |
52| event        | [UIGestureEvent](./ts-uigestureevent.md#uigestureevent) |  **UIGestureEvent** object, which is used to set the gesture to be bound to the component.     |
53
54## Example
55
56This example demonstrates how to dynamically set the gestures bound to a component using **gestureModifier**.
57
58```ts
59// xxx.ets
60class MyButtonModifier implements GestureModifier {
61  supportDoubleTap: boolean = true;
62
63  applyGesture(event: UIGestureEvent): void {
64    if (this.supportDoubleTap) {
65      event.addGesture(
66        new TapGestureHandler({ count: 2, fingers: 1 })
67          .tag("aaa")
68          .onAction((event: GestureEvent) => {
69            console.log("button tap ")
70          })
71      )
72    } else {
73      event.addGesture(
74        new PanGestureHandler()
75          .onActionStart(()=>{
76            console.log("Pan start");
77          })
78      )
79    }
80  }
81}
82
83@Entry
84@Component
85struct Index {
86  @State modifier: MyButtonModifier = new MyButtonModifier()
87
88  build() {
89    Row() {
90      Column() {
91        Column()
92          .gestureModifier(this.modifier)
93          .width(500)
94          .height(500)
95          .backgroundColor(Color.Blue)
96        Button('changeGesture')
97          .onClick(() => {
98            this.modifier.supportDoubleTap = !this.modifier.supportDoubleTap;
99          })
100          .margin({top: 10})
101      }
102      .width('100%')
103    }
104    .height('100%')
105  }
106}
107```
108