• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 动态手势设置
2
3动态设置组件绑定的手势，支持开发者在属性设置时使用if/else语法。
4
5>  **说明：**
6>
7>  从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## gestureModifier
10
11gestureModifier(modifier: GestureModifier)
12
13动态设置组件绑定的手势。
14
15>  **说明：**
16>
17>  gestureModifier不支持自定义组件。
18
19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名   | 类型                  | 必填 | 说明                                                         |
26| -------- | --------------------- | ---- | ------------------------------------------------------------ |
27| modifier | [GestureModifier](#gesturemodifier-1) | 是   | 在当前组件上，动态设置组件绑定的手势，支持使用if/else语法。<br/>modifier: 手势修改器，开发者需要自定义class实现GestureModifier接口。 |
28
29## GestureModifier
30
31开发者需要自定义class实现GestureModifier接口。
32
33### applyGesture
34applyGesture(event: UIGestureEvent): void
35
36组件需要绑定的手势。
37
38开发者可根据需要自定义实现这个方法，对组件设置需要绑定的手势，支持使用if/else语法进行动态设置。
39
40**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
41
42**参数**：
43
44| 参数名            | 类型                                        | 说明                                       |
45| ------------- | ----------------------------------------  | ---------------------------------------- |
46| event        | [UIGestureEvent](./ts-uigestureevent.md#uigestureevent) |  UIGestureEvent对象，用于设置组件需要绑定的手势。      |
47
48## 示例
49
50该示例通过gestureModifier动态设置组件绑定的手势。
51
52```ts
53// xxx.ets
54class MyButtonModifier implements GestureModifier {
55  supportDoubleTap: boolean = true
56
57  applyGesture(event: UIGestureEvent): void {
58    if (this.supportDoubleTap) {
59      event.addGesture(
60        new TapGestureHandler({ count: 2, fingers: 1 })
61          .tag("aaa")
62          .onAction((event: GestureEvent) => {
63            console.log("button tap ")
64          })
65      )
66    } else {
67      event.addGesture(
68        new PanGestureHandler()
69          .onActionStart(()=>{
70            console.log("Pan start");
71          })
72      )
73    }
74  }
75}
76
77@Entry
78@Component
79struct Index {
80  @State modifier: MyButtonModifier = new MyButtonModifier()
81
82  build() {
83    Row() {
84      Column() {
85        Column()
86          .gestureModifier(this.modifier)
87          .width(500)
88          .height(500)
89          .backgroundColor(Color.Blue)
90        Button('changeGesture')
91          .onClick(() => {
92            this.modifier.supportDoubleTap = !this.modifier.supportDoubleTap;
93          })
94          .margin({top: 10})
95      }
96      .width('100%')
97    }
98    .height('100%')
99  }
100}
101```