1# Combined Gestures 2 3Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## APIs 11 12GestureGroup(mode: GestureMode, ...gesture: GestureType[]) 13 14- Parameters 15 | Name| Type| Mandatory| Default Value| Description| 16 | -------- | -------- | -------- | -------- | -------- | 17 | mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.| 18 | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.| 19 20## GestureMode 21| Name| Description| 22| -------- | -------- | 23| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.| 24| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.| 25| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.| 26 27 28## Events 29 30| Name| Description| 31| -------- | -------- | 32| onCancel(event: () => void) | Callback for the GestureMode.Sequence cancellation event.| 33 34 35## Example 36 37```ts 38// xxx.ets 39@Entry 40@Component 41struct GestureGroupExample { 42 @State count: number = 0 43 @State offsetX: number = 0 44 @State offsetY: number = 0 45 @State positionX: number = 0 46 @State positionY: number = 0 47 @State borderStyles: BorderStyle = BorderStyle.Solid 48 49 build() { 50 Column() { 51 Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 52 } 53 .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) 54 .height(150) 55 .width(200) 56 .padding(20) 57 .margin(20) 58 .border({ width: 3, style: this.borderStyles }) 59 .gesture( 60 // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered. 61 GestureGroup(GestureMode.Sequence, 62 LongPressGesture({ repeat: true }) 63 .onAction((event: GestureEvent) => { 64 if (event.repeat) { 65 this.count++ 66 } 67 console.info('LongPress onAction') 68 }) 69 .onActionEnd(() => { 70 console.info('LongPress end') 71 }), 72 PanGesture() 73 .onActionStart(() => { 74 this.borderStyles = BorderStyle.Dashed 75 console.info('pan start') 76 }) 77 .onActionUpdate((event: GestureEvent) => { 78 this.offsetX = this.positionX + event.offsetX 79 this.offsetY = this.positionY + event.offsetY 80 console.info('pan update') 81 }) 82 .onActionEnd(() => { 83 this.positionX = this.offsetX 84 this.positionY = this.offsetY 85 this.borderStyles = BorderStyle.Solid 86 console.info('pan end') 87 }) 88 ) 89 .onCancel(() => { 90 console.info('sequence gesture canceled') 91 }) 92 ) 93 } 94} 95``` 96 97Diagram: 98 99In sequence recognition mode the long press gesture event is triggered first. 100 101 102 103After the long press gesture is recognized, the drag gesture event is triggered. 104 105  106
