1# 动态手势设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9动态设置组件绑定的手势，支持开发者在属性设置时使用if/else语法进行动态设置。 10 11> **说明：** 12> 13> 从API version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## gestureModifier 16 17gestureModifier(modifier: GestureModifier): T 18 19动态设置组件绑定的手势。 20 21> **说明：** 22> 23> gestureModifier不支持自定义组件。 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数：** 30 31| 参数名 | 类型 | 必填 | 说明 | 32| -------- | --------------------- | ---- | ------------------------------------------------------------ | 33| modifier | [GestureModifier](#gesturemodifier-1) | 是 | 在当前组件上，动态设置组件绑定的手势，支持使用if/else语法。<br/>modifier: 手势修改器，开发者需要自定义class实现GestureModifier接口。 | 34 35**返回值：** 36 37| 类型 | 说明 | 38| -------- | -------- | 39| T | 返回当前组件。 | 40 41## GestureModifier 42 43开发者需要自定义class实现GestureModifier接口。 44 45### applyGesture 46applyGesture(event: UIGestureEvent): void 47 48手势更新函数。 49 50开发者可根据需要自定义实现这个方法，对组件设置需要绑定的手势，支持使用if/else语法进行动态设置。若在当次手势操作过程中触发了组件上的手势动态切换，该切换效果在所有手指抬起当次手势结束后下一次手势操作中生效。 51 52**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数**： 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ------------- | ---------------------------------------- | ---------------------------------------- |-------------------------------- | 60| event | [UIGestureEvent](./ts-uigestureevent.md#uigestureevent) | 是 |UIGestureEvent对象，用于设置组件需要绑定的手势。 | 61 62## 示例 63 64### 示例1（动态绑定手势） 65 66该示例通过gestureModifier动态设置组件绑定的手势。 67 68```ts 69// xxx.ets 70class MyButtonModifier implements GestureModifier { 71 supportDoubleTap: boolean = true; 72 73 applyGesture(event: UIGestureEvent): void { 74 if (this.supportDoubleTap) { 75 event.addGesture( 76 new TapGestureHandler({ count: 2, fingers: 1 }) 77 .tag("aaa") 78 .onAction((event: GestureEvent) => { 79 console.info('Gesture Info is', JSON.stringify(event)); 80 console.info('button tap'); 81 }) 82 ) 83 } else { 84 event.addGesture( 85 new PanGestureHandler() 86 .onActionStart(() => { 87 console.info('Pan start'); 88 }) 89 ) 90 } 91 } 92} 93 94@Entry 95@Component 96struct Index { 97 @State modifier: MyButtonModifier = new MyButtonModifier(); 98 99 build() { 100 Row() { 101 Column() { 102 Column() 103 .gestureModifier(this.modifier) 104 .width(500) 105 .height(500) 106 .backgroundColor(Color.Gray) 107 Button('changeGesture') 108 .onClick(() => { 109 this.modifier.supportDoubleTap = !this.modifier.supportDoubleTap; 110 }) 111 .margin({ top: 10 }) 112 } 113 .width('100%') 114 } 115 .height('100%') 116 } 117} 118``` 119 120 121### 示例2（动态绑定手势组） 122 123该示例通过gestureModifier动态设置组件绑定的手势组。 124 125```ts 126class MyButtonModifier implements GestureModifier { 127 isExclusive: boolean = true; 128 129 applyGesture(event: UIGestureEvent): void { 130 if (this.isExclusive) { 131 // 绑定互斥手势组 132 event.addGesture(new GestureGroupHandler({ 133 mode: GestureMode.Exclusive, 134 gestures: [new TapGestureHandler({ count: 2, fingers: 1 }).onAction((event) => { 135 console.info('event info is', JSON.stringify(event)); 136 console.info('ExclusiveGroupGesture TapGesture is called'); 137 }), new LongPressGestureHandler({ repeat: true, fingers: 1 }).onAction((event) => { 138 console.info('event info is', JSON.stringify(event)); 139 console.info('ExclusiveGroupGesture LongPressGesture is called'); 140 }), new PanGestureHandler({ fingers: 1 }).onActionStart((event) => { 141 console.info('event info is', JSON.stringify(event)); 142 console.info('ExclusiveGroupGesture PanGesture onActionStart is called'); 143 }).onActionEnd((event) => { 144 console.info('event info is', JSON.stringify(event)); 145 console.info('ExclusiveGroupGesture PanGesture onActionEnd is called'); 146 })] 147 })) 148 } else { 149 // 绑定并行手势组 150 event.addGesture(new GestureGroupHandler({ 151 mode: GestureMode.Parallel, 152 gestures: [new TapGestureHandler({ count: 2, fingers: 1 }).onAction((event) => { 153 console.info('event info is', JSON.stringify(event)); 154 console.info('ParallelGroupGesture TapGesture is called'); 155 }), new LongPressGestureHandler({ repeat: true, fingers: 1 }).onAction((event) => { 156 console.info('event info is', JSON.stringify(event)); 157 console.info('ParallelGroupGesture LongPressGesture is called'); 158 }), new PanGestureHandler({ fingers: 1 }).onActionStart((event) => { 159 console.info('event info is', JSON.stringify(event)); 160 console.info('ParallelGroupGesture PanGesture onActionStart is called'); 161 }).onActionEnd((event) => { 162 console.info('event info is', JSON.stringify(event)); 163 console.info('ParallelGroupGesture PanGesture onActionEnd is called'); 164 })] 165 })) 166 } 167 } 168} 169 170@Entry 171@Component 172struct Index { 173 @State modifier: MyButtonModifier = new MyButtonModifier(); 174 175 build() { 176 Row() { 177 Column() { 178 Column() 179 .gestureModifier(this.modifier) 180 .width(500) 181 .height(500) 182 .backgroundColor(Color.Gray) 183 184 Button('changeGestureGroupType') 185 .onClick(() => { 186 this.modifier.isExclusive = !this.modifier.isExclusive; 187 }) 188 .margin({ top: 10 }) 189 } 190 .width('100%') 191 } 192 .height('100%') 193 } 194} 195``` 196
