1# 动态手势设置
2
3动态设置组件绑定的手势，支持开发者在属性设置时使用if/else语法。
4
5>  **说明：**
6>
7>  从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## gestureModifier
10
11gestureModifier(modifier: GestureModifier)
12
13动态设置组件绑定的手势。
14
15**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
16
17**系统能力：** SystemCapability.ArkUI.ArkUI.Full
18
19**参数：**
20
21| 参数名   | 类型                  | 必填 | 说明                                                         |
22| -------- | --------------------- | ---- | ------------------------------------------------------------ |
23| modifier | [GestureModifier](#gesturemodifier-1) | 是   | 在当前组件上，动态设置组件绑定的手势，支持使用if/else语法。<br/>modifier: 手势修改器，开发者需要自定义class实现GestureModifier接口。 |
24
25## GestureModifier
26
27开发者需要自定义class实现GestureModifier接口。
28
29### applyGesture
30applyGesture(event: UIGestureEvent): void
31
32组件需要绑定的手势。
33
34开发者可根据需要自定义实现这个方法，对组件设置需要绑定的手势，支持使用if/else语法进行动态设置。
35
36**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
37
38**参数**：
39
40| 参数名            | 类型                                        | 说明                                       |
41| ------------- | ----------------------------------------  | ---------------------------------------- |
42| event        | [UIGestureEvent](./ts-uigestureevent.md#uigestureevent) |  UIGestureEvent对象，用于设置组件需要绑定的手势。      |
43
44## 示例
45
46该示例通过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```