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 46```ts 47// xxx.ets 48class MyButtonModifier implements GestureModifier { 49 supportDoubleTap: boolean = true 50 51 applyGesture(event: UIGestureEvent): void { 52 if (this.supportDoubleTap) { 53 event.addGesture( 54 new TapGestureHandler({ count: 2, fingers: 1 }) 55 .tag("aaa") 56 .onAction((event: GestureEvent) => { 57 console.log("button tap ") 58 }) 59 ) 60 } else { 61 event.addGesture( 62 new PanGestureHandler() 63 .onActionStart(()=>{ 64 console.log("Pan start"); 65 }) 66 ) 67 } 68 } 69} 70 71@Entry 72@Component 73struct Index { 74 @State modifier: MyButtonModifier = new MyButtonModifier() 75 76 build() { 77 Row() { 78 Column() { 79 Column() 80 .gestureModifier(this.modifier) 81 .width(500) 82 .height(500) 83 .backgroundColor(Color.Blue) 84 } 85 .width('100%') 86 } 87 .height('100%') 88 } 89} 90``` 91<!--no_check-->