1# Combined Gestures 2 3 4A combined gesture consists of multiple single gestures. Different GestureModes are used in GestureGroup to declare the type of the combined gesture. [Continuous recognition](#continuous-recognition), [parallel recognition](#parallel-recognition), and [exclusive recognition](#exclusive-recognition) are supported for a group of gestures. 5 6 7 8```ts 9GestureGroup(mode:GestureMode, ...gesture:GestureType[]) 10``` 11 12 13- **mode**: recognition mode of combined gestures. This parameter is mandatory and belongs to the **GestureMode** enumeration class. 14 15- **gesture**: array consisting of multiple gestures. This parameter is mandatory. . 16 17 18## Continuous Recognition 19 20For continuous recognition, the value of **GestureMode** is **Sequence**. In this gesture mode, gestures registered in the combined gestures will be recognized according to the registration sequence until they are all recognized successfully. If any of the registered gestures fails to be recognized, all gestures fail to be recognized. 21 22In the following example, the combined gestures for continuous recognition are the long press gesture and pan gesture. 23 24The **translate** attribute is bound to a **\<Column>** component. You can set the attribute to translate the component. Then, bind **LongPressGesture** and **PanGesture** to the component in the **Sequence** gesture mode. When a long press gesture is recognized, the displayed number is updated. When the user drags the component after the long press gesture, the component is dragged based on the callback function of the pan gesture. 25 26 27 28```ts 29// xxx.ets 30@Entry 31@Component 32struct Index { 33 @State offsetX: number = 0; 34 @State offsetY: number = 0; 35 @State count: number = 0; 36 @State positionX: number = 0; 37 @State positionY: number = 0; 38 @State borderStyles: BorderStyle = BorderStyle.Solid 39 40 build() { 41 Column() { 42 Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 43 .fontSize(28) 44 } 45 // Bind the translate attribute to translate the component. 46 .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) 47 .height(250) 48 .width(300) 49 // The following combined gestures are recognized in sequence. When the long press gesture event is not triggered correctly, the pan gesture event is not triggered. 50 .gesture( 51 // Set the gesture mode to Sequence. 52 GestureGroup(GestureMode.Sequence, 53 // The first gesture recognized in the combined gestures is the long press gesture, which can be responded to for multiple times. 54 LongPressGesture({ repeat: true }) 55 // When the long press gesture is successfully recognized, the value of count displayed on the <Text> component is increased. 56 .onAction((event: GestureEvent) => { 57 if (event.repeat) { 58 this.count++; 59 } 60 console.info('LongPress onAction'); 61 }) 62 .onActionEnd(() => { 63 console.info('LongPress end'); 64 }), 65 // The pan gesture is triggered when the component is dragged after the long press gesture is recognized. 66 PanGesture() 67 .onActionStart(() => { 68 this.borderStyles = BorderStyle.Dashed; 69 console.info('pan start'); 70 }) 71 // When the gesture is triggered, the pan distance is obtained based on the callback, and the displacement distance of the component is modified. In this way, the component is translated. 72 .onActionUpdate((event: GestureEvent) => { 73 this.offsetX = this.positionX + event.offsetX; 74 this.offsetY = this.positionY + event.offsetY; 75 console.info('pan update'); 76 }) 77 .onActionEnd(() => { 78 this.positionX = this.offsetX; 79 this.positionY = this.offsetY; 80 this.borderStyles = BorderStyle.Solid; 81 }) 82 ) 83 ) 84 } 85} 86``` 87 88 89 90 91 92>**NOTE** 93> 94>The drag event is a typical use case of continuous recognition with the long press gesture and pan gesture combined. It is triggered only when the user performs the pan gesture within the preset time frame after a long press gesture is recognized. If the long press gesture is not recognized or the pan gesture is not performed within the preset time frame, the drag event will not be triggered. 95 96 97## Parallel Recognition 98 99For parallel recognition, the value of **GestureMode** is **Parallel**. In this gesture mode, gestures registered in the combined gestures will be recognized at the same time until they are all recognized successfully. The gestures are recognized in parallel without affecting each other. 100 101For example, if the tap gesture and the double-tap gesture are bound to the \**<Column>** component in parallel recognition mode, they can be recognized at the same time, and the recognition of these two gestures does not interfere with each other. 102 103 104 105```ts 106// xxx.ets 107@Entry 108@Component 109struct Index { 110 @State count1: number = 0; 111 @State count2: number = 0; 112 113 build() { 114 Column() { 115 Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n') 116 .fontSize(28) 117 } 118 .height(200) 119 .width(250) 120 // The following combined gestures are recognized in parallel mode. After a tap gesture is recognized successfully, if another tap gesture is recognized within the specified time frame, a double-tap gesture will also be recognized. 121 .gesture( 122 GestureGroup(GestureMode.Parallel, 123 TapGesture({ count: 1 }) 124 .onAction(() => { 125 this.count1++; 126 }), 127 TapGesture({ count: 2 }) 128 .onAction(() => { 129 this.count2++; 130 }) 131 ) 132 ) 133 } 134} 135``` 136 137 138 139 140 141>**NOTE** 142> 143>After a tap gesture and a double-tap gesture are combined for parallel recognition, when taps are performed in an area, the tap gesture and the double-tap gesture are recognized at the same time. 144> 145>When there is only a single tap, the tap gesture is recognized, but the double-tap gesture fails to be recognized. 146> 147>When there are two taps and the interval between the two taps is within a specified period (300 ms by default), two tap events and one double-tap event are triggered. 148> 149>When there are two taps, but the interval between the two taps exceeds the specified time, two tap events are triggered but the double-tap event is not triggered. 150 151 152## Exclusive Recognition 153 154For exclusive recognition, the value of **GestureMode** is **Exclusive**. In this gesture mode, gestures registered in the combined gesture are recognized at the same time. If one gesture is recognized successfully, the gesture recognition ends, and all other gestures fail to be recognized. 155 156For example, if the tap gesture and the double-tap gesture are bound to the \**<Column>** component in exclusive recognition mode, only a tap gesture event can be triggered. This is because a tap gesture requires a single tap to be triggered, and a double-tap gesture event requires two taps to be triggered; each tap event is consumed by the tap gesture and cannot be accumulated into a double-tap gesture. 157 158 159 160```ts 161// xxx.ets 162@Entry 163@Component 164struct Index { 165 @State count1: number = 0; 166 @State count2: number = 0; 167 168 build() { 169 Column() { 170 Text('parallel gesture\n' + 'tapGesture count is 1:' + this.count1 + '\ntapGesture count is 2:' + this.count2 + '\n') 171 .fontSize(28) 172 } 173 .height(200) 174 .width(250) 175 // The following combined gestures are mutually exclusive. After the tap gesture is recognized successfully, the double-tap gesture fails to be recognized. 176 .gesture( 177 GestureGroup(GestureMode.Exclusive, 178 TapGesture({ count: 1 }) 179 .onAction(() => { 180 this.count1++; 181 }), 182 TapGesture({ count: 2 }) 183 .onAction(() => { 184 this.count2++; 185 }) 186 ) 187 ) 188 } 189} 190``` 191 192 193 194 195 196>**NOTE** 197> 198>After a tap gesture and a double-tap gesture are combined for exclusive recognition, when taps are performed in an area, the tap gesture and the double-tap gesture are recognized at the same time. 199> 200>When there is only a single tap, the tap gesture is recognized, but the double-tap gesture fails to be recognized. 201> 202>When there are two taps, the gesture recognition is declared as successful when the first tap gesture is recognized. In this case, the double-tap gesture fails to be recognized. Even if the second tap is performed within the specified time, the double-tap gesture event is not responded to. Instead, another tap gesture event is triggered. 203
