1# Combined Gestures 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @jiangtao92--> 5<!--Designer: @piggyguy--> 6<!--Tester: @songyanhong--> 7<!--Adviser: @HelloCrease--> 8 9Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures. 10 11> **NOTE** 12> 13> The initial APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 14 15## APIs 16 17GestureGroup(mode: GestureMode, ...gesture: GestureType[]) 18 19**Atomic service API**: This API can be used in atomic services since API version 11. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 27| mode | [GestureMode](#gesturemode) | Yes | Recognition mode of combined gestures.<br>Default value: **GestureMode.Sequence** | 28| 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)<br>\| [SwipeGesture](ts-basic-gestures-swipegesture.md)<br>\| GestureGroup | No | One or more basic gestures to be recognized simultaneously. If this parameter is left empty, simultaneous recognition will not take effect.<br>**NOTE**<br>To add both tap and double-tap gestures for a component, add two TapGestures, with the tap gesture added after the double-tap gesture.| 29 30## GestureMode 31 32**Atomic service API**: This API can be used in atomic services since API version 11. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36| Name | Value | Description | 37| --------- | -------| ------------------------------------- | 38| Sequence | - | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. Once one gesture fails to be recognized, all subsequent gestures fail to be recognized.<br>Only the last gesture in the sequential recognition gesture group can respond to **onActionEnd**.| 39| Parallel | - | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. | 40| Exclusive| - | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. | 41 42 43## Events 44 45**Atomic service API**: This API can be used in atomic services since API version 11. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49### onCancel 50 51onCancel(event: () => void) 52 53Invoked when a tap cancellation event is received after a gesture is recognized. 54 55**Atomic service API**: This API can be used in atomic services since API version 11. 56 57**System capability**: SystemCapability.ArkUI.ArkUI.Full 58 59**Parameters** 60 61| Name| Type | Mandatory| Description | 62| ------ | ------------------------------------------ | ---- | ---------------------------- | 63| event | event: () => void | Yes | Callback for the gesture event.| 64 65## Example 66 67This example demonstrates the sequential recognition of combined gestures, specifically long press and pan gestures, using **GestureGroup**. 68 69```ts 70// xxx.ets 71@Entry 72@Component 73struct GestureGroupExample { 74 @State count: number = 0; 75 @State offsetX: number = 0; 76 @State offsetY: number = 0; 77 @State positionX: number = 0; 78 @State positionY: number = 0; 79 @State borderStyles: BorderStyle = BorderStyle.Solid; 80 81 build() { 82 Column() { 83 Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 84 .fontSize(15) 85 } 86 .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) 87 .height(150) 88 .width(200) 89 .padding(20) 90 .margin(20) 91 .border({ width: 3, style: this.borderStyles }) 92 .gesture( 93 // 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. 94 GestureGroup(GestureMode.Sequence, 95 LongPressGesture({ repeat: true }) 96 .onAction((event?: GestureEvent) => { 97 if (event && event.repeat) { 98 this.count++ 99 } 100 console.info('LongPress onAction') 101 }), 102 PanGesture() 103 .onActionStart(() => { 104 this.borderStyles = BorderStyle.Dashed 105 console.info('pan start') 106 }) 107 .onActionUpdate((event?: GestureEvent) => { 108 if (event) { 109 this.offsetX = this.positionX + event.offsetX 110 this.offsetY = this.positionY + event.offsetY 111 } 112 console.info('pan update') 113 }) 114 .onActionEnd(() => { 115 this.positionX = this.offsetX 116 this.positionY = this.offsetY 117 this.borderStyles = BorderStyle.Solid 118 console.info('pan end') 119 }) 120 ) 121 .onCancel(() => { 122 console.info('sequence gesture canceled') 123 }) 124 ) 125 } 126} 127``` 128 129Diagram: 130 131In sequence recognition mode, the long press gesture event is triggered first. 132 133 134 135After the long press gesture is recognized, the drag gesture event is triggered. 136 137  138
