1# Gesture Blocking Enhancement 2 3Gesture blocking enhancement offers components the capability to block gestures. You can handle built-in gestures in parallel with gestures that have a higher priority as needed, and can dynamically control the triggering of gesture events. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8 9## shouldBuiltInRecognizerParallelWith 10 11shouldBuiltInRecognizerParallelWith(callback: ShouldBuiltInRecognizerParallelWithCallback): T 12 13Provides a callback to set the parallel relationship between built-in gestures and gestures of other components in the response chain. 14 15**Atomic service API**: This API can be used in atomic services since API version 12. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20| Name | Type | Mandatory | Description | 21| ---------- | -------------------------- | ------- | ----------------------------- | 22| callback | [ShouldBuiltInRecognizerParallelWithCallback](#shouldbuiltinrecognizerparallelwithcallback) | Yes | Callback used to set the parallel relationship between built-in gestures and gestures of other components in the response chain. This callback is triggered during touch hit testing to form a gesture parallel relationship.| 23 24**Return value** 25 26| Type| Description| 27| -------- | -------- | 28| T | Current component.| 29 30## ShouldBuiltInRecognizerParallelWithCallback 31 32type ShouldBuiltInRecognizerParallelWithCallback = (current: GestureRecognizer, others: Array\<GestureRecognizer\>) => GestureRecognizer 33 34Represents the callback used to set the parallel relationship between built-in gestures and gestures of other components in the response chain. 35 36**Atomic service API**: This API can be used in atomic services since API version 12. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40**Parameters** 41 42| Name | Type | Mandatory| Description | 43| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 44| current | [GestureRecognizer](#gesturerecognizer) | Yes | Built-in gesture recognizer of the current component. Currently only a built-in gesture recognizer of the [PAN_GESTURE](ts-gesture-customize-judge.md#gesturejudgeresult11) type is supported.| 45| others | Array\<[GestureRecognizer](#gesturerecognizer)\> | Yes | Gesture recognizers of the same type from other components with higher priority in the response chain.| 46 47**Return value** 48 49| Type | Description | 50| ------ | --------- | 51| [GestureRecognizer](#gesturerecognizer) | Gesture recognizer that is bound in parallel with the current recognizer.| 52 53## GestureRecognizer 54 55Defines a gesture recognizer object. 56 57### getTag 58 59getTag(): string 60 61Obtains the tag of this gesture recognizer. 62 63**Atomic service API**: This API can be used in atomic services since API version 12. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67**Return value** 68 69| Type | Description | 70| ------ | --------- | 71| string | Tag of the current gesture recognizer.| 72 73### getType 74 75getType(): GestureControl.GestureType 76 77Obtains the type of this gesture recognizer. 78 79**Atomic service API**: This API can be used in atomic services since API version 12. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83**Return value** 84 85| Type | Description | 86| ------ | --------- | 87| [GestureControl.GestureType](ts-gesture-customize-judge.md#gesturetype12) | Type of the current gesture recognizer.| 88 89### isBuiltIn 90 91isBuiltIn(): boolean 92 93Obtains whether this gesture recognizer is a built-in gesture. 94 95**Atomic service API**: This API can be used in atomic services since API version 12. 96 97**System capability**: SystemCapability.ArkUI.ArkUI.Full 98 99**Return value** 100 101| Type | Description | 102| ------ | --------- | 103| boolean | Whether the current gesture recognizer is a built-in gesture. The value **true** means that the gesture recognizer is a built-in gesture, and **false** means the opposite.| 104 105### setEnabled 106 107setEnabled(isEnabled: boolean): void 108 109Sets the enabled state of this gesture recognizer. 110 111**Atomic service API**: This API can be used in atomic services since API version 12. 112 113**System capability**: SystemCapability.ArkUI.ArkUI.Full 114 115**Parameters** 116 117| Name | Type | Mandatory | Description | 118| ------- | ---------------------------------- | ---- | ----- | 119| isEnabled | boolean | Yes | Enabled state to set. The value **true** means that the gesture recognizer is enabled and will trigger events, and **false** means the opposite.| 120 121### isEnabled 122 123isEnabled(): boolean 124 125Obtains the enabled state of this gesture recognizer. 126 127**Atomic service API**: This API can be used in atomic services since API version 12. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131**Return value** 132 133| Type | Description | 134| ------ | --------- | 135| boolean | Enabled state of the gesture recognizer. The value **true** means that the gesture recognizer is enabled and will trigger events, and **false** means the opposite.| 136 137### getState 138 139getState(): GestureRecognizerState 140 141Obtains the state of this gesture recognizer. 142 143**Atomic service API**: This API can be used in atomic services since API version 12. 144 145**System capability**: SystemCapability.ArkUI.ArkUI.Full 146 147**Return value** 148 149| Type | Description | 150| ------ | --------- | 151| [GestureRecognizerState](#gesturerecognizerstate) | State of the gesture recognizer.| 152 153### getEventTargetInfo 154 155getEventTargetInfo(): EventTargetInfo 156 157Obtains the information about the component corresponding to this gesture recognizer. 158 159**Atomic service API**: This API can be used in atomic services since API version 12. 160 161**System capability**: SystemCapability.ArkUI.ArkUI.Full 162 163**Return value** 164 165| Type | Description | 166| ------ | --------- | 167| [EventTargetInfo](#eventtargetinfo) | Information about the component corresponding to the current gesture recognizer.| 168 169### isValid 170 171isValid(): boolean; 172 173Whether the current gesture recognizer is valid. 174 175**Atomic service API**: This API can be used in atomic services since API version 12. 176 177**System capability**: SystemCapability.ArkUI.ArkUI.Full 178 179**Return value** 180 181| Type | Description | 182| ------ | --------- | 183| boolean | Whether the current gesture recognizer is valid. Returns **false** if the component bound to this recognizer is destructed or if the recognizer is not on the response chain.| 184 185## GestureRecognizerState 186 187Enumerates the gesture recognizer states. 188 189**Atomic service API**: This API can be used in atomic services since API version 12. 190 191**System capability**: SystemCapability.ArkUI.ArkUI.Full 192 193| Name | Value | Description | 194| ------- | ---- | ---------------------------------- | 195| READY | 0 | Ready.| 196| DETECTING | 1 | Detecting.| 197| PENDING | 2 | Pending.| 198| BLOCKED | 3 | Blocked.| 199| SUCCESSFUL | 4 | Successful.| 200| FAILED | 5 | Failed.| 201 202## EventTargetInfo 203 204Provides the information about the component corresponding to the gesture recognizer. 205 206### getId 207 208getId(): string 209 210Obtains the ID of this component. 211 212**Atomic service API**: This API can be used in atomic services since API version 12. 213 214**System capability**: SystemCapability.ArkUI.ArkUI.Full 215 216**Return value** 217 218| Type | Description | 219| ------ | --------- | 220| string | [ID](./ts-universal-attributes-component-id.md#id) of the current component.| 221 222## ScrollableTargetInfo 223 224Provides the information about the scrollable container component corresponding to the gesture recognizer. It inherits from [EventTargetInfo](#eventtargetinfo). 225 226### isBegin 227 228isBegin(): boolean 229 230Checks whether this scrollable container component is scrolled to the top. If it is a **Swiper** component in loop mode, **false** is returned. 231 232**Atomic service API**: This API can be used in atomic services since API version 12. 233 234**System capability**: SystemCapability.ArkUI.ArkUI.Full 235 236**Return value** 237 238| Type | Description | 239| ------ | --------- | 240| boolean | Whether the current scrollable container component is scrolled to the top. The value **true** means that the component is scrolled to the top, and **false** means the opposite.| 241 242### isEnd 243 244isEnd(): boolean 245 246Checks whether this scrollable container component is scrolled to the bottom. If it is a **Swiper** component in loop mode, **false** is returned. 247 248**Atomic service API**: This API can be used in atomic services since API version 12. 249 250**System capability**: SystemCapability.ArkUI.ArkUI.Full 251 252**Return value** 253 254| Type | Description | 255| ------ | --------- | 256| boolean | Whether the current scrollable container component is scrolled to the bottom. The value **true** means that the component is scrolled to the bottom, and **false** means the opposite.| 257 258### getFingerCount<sup>18+</sup> 259 260getFingerCount(): number 261 262Obtains the number of fingers required to trigger the preset gesture. 263 264**Atomic service API**: This API can be used in atomic services since API version 18. 265 266**System capability**: SystemCapability.ArkUI.ArkUI.Full 267 268**Return value** 269 270| Type | Description | 271| ------ | --------- | 272| number | Number of fingers required to trigger the preset gesture.<br>Value range: an integer from 1 to 10.| 273 274### isFingerCountLimit<sup>18+</sup> 275 276isFingerCountLimit(): boolean 277 278Checks whether the preset gesture will detect the number of fingers on the screen. 279 280**Atomic service API**: This API can be used in atomic services since API version 18. 281 282**System capability**: SystemCapability.ArkUI.ArkUI.Full 283 284**Return value** 285 286| Type | Description | 287| ------ | --------- | 288| boolean | Whether the preset gesture will detect the number of fingers on the screen. Returns **true** if the gesture will detect the number of fingers on the touch screen; returns **false** otherwise.| 289 290## PanRecognizer 291 292Defines a pan gesture recognizer object. It inherits from [GestureRecognizer](#gesturerecognizer). 293 294### getPanGestureOptions 295 296getPanGestureOptions(): PanGestureOptions 297 298Obtains the properties of this pan gesture recognizer. 299 300**Atomic service API**: This API can be used in atomic services since API version 12. 301 302**System capability**: SystemCapability.ArkUI.ArkUI.Full 303 304**Return value** 305 306| Type | Description | 307| ------ | --------- | 308| [PanGestureOptions](./ts-basic-gestures-pangesture.md#pangestureoptions) | Properties of the current pan gesture recognizer.| 309 310## TapRecognizer<sup>18+</sup> 311 312Implements a tap gesture recognizer. It inherits from [GestureRecognizer](#gesturerecognizer). 313 314### getTapCount<sup>18+</sup> 315 316getTapCount(): number 317 318Obtains the number of consecutive taps required for the tap gesture to be recognized. 319 320**Atomic service API**: This API can be used in atomic services since API version 18. 321 322**System capability**: SystemCapability.ArkUI.ArkUI.Full 323 324**Return value** 325 326| Type | Description | 327| ------ | --------- | 328| number | Number of consecutive taps required for the tap gesture to be recognized.<br>Value range: [0, +∞).| 329 330## LongPressRecognizer<sup>18+</sup> 331 332Implements a long press gesture recognizer. It inherits from [GestureRecognizer](#gesturerecognizer). 333 334### isRepeat<sup>18+</sup> 335 336isRepeat(): boolean 337 338Checks whether the long press gesture recognizer is set to trigger repeated callbacks. 339 340**Atomic service API**: This API can be used in atomic services since API version 18. 341 342**System capability**: SystemCapability.ArkUI.ArkUI.Full 343 344**Return value** 345 346| Type | Description | 347| ------ | --------- | 348| boolean | Whether the long press gesture recognizer is set to trigger repeated callbacks. Returns **true** if the long press gesture recognizer is set to trigger repeated callbacks; returns **false** otherwise.| 349 350### getDuration<sup>18+</sup> 351 352getDuration(): number 353 354Obtains the minimum duration required for the long press gesture to be recognized. 355 356**Atomic service API**: This API can be used in atomic services since API version 18. 357 358**System capability**: SystemCapability.ArkUI.ArkUI.Full 359 360**Return value** 361 362| Type | Description | 363| ------ | --------- | 364| number | Minimum duration required for the long press gesture to be recognized, in ms.<br>Value range: [0, +∞).| 365 366## SwipeRecognizer<sup>18+</sup> 367 368Implements a swipe gesture recognizer. It inherits from [GestureRecognizer](#gesturerecognizer). 369 370### getVelocityThreshold<sup>18+</sup> 371 372getVelocityThreshold(): number 373 374Obtains the minimum velocity required for the swipe gesture to be recognized. 375 376**Atomic service API**: This API can be used in atomic services since API version 18. 377 378**System capability**: SystemCapability.ArkUI.ArkUI.Full 379 380**Return value** 381 382| Type | Description | 383| ------ | --------- | 384| number | Minimum velocity required for the swipe gesture to be recognized, in vp/s.<br>Value range: [0, +∞).| 385 386### getDirection<sup>18+</sup> 387 388getDirection(): SwipeDirection 389 390Obtains the direction for recognizing swipe gestures. 391 392**Atomic service API**: This API can be used in atomic services since API version 18. 393 394**System capability**: SystemCapability.ArkUI.ArkUI.Full 395 396**Return value** 397 398| Type | Description | 399| ------ | --------- | 400| [SwipeDirection](./ts-basic-gestures-swipegesture.md#swipedirection) | Direction for recognizing swipe gestures.| 401 402## PinchRecognizer<sup>18+</sup> 403 404Implements a pinch gesture recognizer. It inherits from [GestureRecognizer](#gesturerecognizer). 405 406### getDistance<sup>18+</sup> 407 408getDistance(): number 409 410Obtains the minimum distance required for the pinch gesture to be recognized. 411 412**Atomic service API**: This API can be used in atomic services since API version 18. 413 414**System capability**: SystemCapability.ArkUI.ArkUI.Full 415 416**Return value** 417 418| Type | Description | 419| ------ | --------- | 420| number | Minimum distance required for the pinch gesture to be recognized, in vp.<br>Value range: [0, +∞).| 421 422## RotationRecognizer<sup>18+</sup> 423 424Implements a rotation gesture recognizer. It inherits from [GestureRecognizer](#gesturerecognizer). 425 426### getAngle<sup>18+</sup> 427 428getAngle(): number 429 430Obtains the minimum angle change required for the rotation gesture to be recognized. 431 432**Atomic service API**: This API can be used in atomic services since API version 18. 433 434**System capability**: SystemCapability.ArkUI.ArkUI.Full 435 436**Return value** 437 438| Type | Description | 439| ------ | --------- | 440| number | Minimum angle change required for the rotation gesture to be recognized, in degrees (deg).<br>Value range: [0, +∞).<br>**NOTE**<br>If the provided angle is less than or equal to 0 or greater than 360, it is converted to the default value **1**.| 441 442## onGestureRecognizerJudgeBegin<sup>13+</sup> 443 444onGestureRecognizerJudgeBegin(callback: GestureRecognizerJudgeBeginCallback, exposeInnerGesture: boolean): T 445 446Binds a custom gesture recognizer judgment callback to the component. 447 448The **exposeInnerGesture** parameter indicates whether to expose the callback to the built-in components of ArkUI native composite components.<br> 449For scenarios where the callback does not need to be exposed to the built-in components of ArkUI native composite components, you are advised to use the [onGestureRecognizerJudgeBegin](#ongesturerecognizerjudgebegin) API. If the callback needs to be exposed to the built-in components of ArkUI native composite components, use this API and set **exposeInnerGesture** to **true**. 450 451**Atomic service API**: This API can be used in atomic services since API version 13. 452 453**System capability**: SystemCapability.ArkUI.ArkUI.Full 454 455**Parameters** 456| Name | Type | Mandatory | Description | 457| ---------- | -------------------------- | ------- | ----------------------------- | 458| callback | [GestureRecognizerJudgeBeginCallback](#gesturerecognizerjudgebegincallback) | Yes | Custom gesture recognizer judgment callback to bind to the component. This callback is triggered when the gesture bound to the component is accepted to obtain the result.| 459| exposeInnerGesture | boolean | Yes | Whether to expose the internal gesture.<br>Default value: **false**<br>**NOTE**<br>For a composite component, setting this parameter to **true** exposes the internal gesture recognizer of the composite component in the **current** parameter callback.<br>Currently, only the [Tabs](ts-container-tabs.md) component is supported. Do not set this parameter for other components.<br>When this parameter is set to **false**, this API provides the same functionality as the [onGestureRecognizerJudgeBegin](#ongesturerecognizerjudgebegin) API.| 460 461## onGestureRecognizerJudgeBegin 462 463onGestureRecognizerJudgeBegin(callback: GestureRecognizerJudgeBeginCallback): T 464 465Binds a custom gesture recognizer judgment callback to the component. 466 467**Atomic service API**: This API can be used in atomic services since API version 12. 468 469**System capability**: SystemCapability.ArkUI.ArkUI.Full 470 471**Parameters** 472| Name | Type | Mandatory | Description | 473| ---------- | -------------------------- | ------- | ----------------------------- | 474| callback | [GestureRecognizerJudgeBeginCallback](#gesturerecognizerjudgebegincallback) | Yes | Custom gesture recognizer judgment callback to bind to the component. This callback is triggered when the gesture bound to the component is accepted to obtain the result.| 475 476**Return value** 477 478| Type| Description| 479| -------- | -------- | 480| T | Current component.| 481 482## GestureRecognizerJudgeBeginCallback 483 484type GestureRecognizerJudgeBeginCallback = (event: BaseGestureEvent, current: GestureRecognizer, recognizers: Array\<GestureRecognizer\>) => GestureJudgeResult 485 486Represents a custom gesture recognizer judgment callback. 487 488**Atomic service API**: This API can be used in atomic services since API version 12. 489 490**System capability**: SystemCapability.ArkUI.ArkUI.Full 491 492**Parameters** 493 494| Name | Type | Mandatory| Description | 495| -------- | ------------------------- | ---- | ------------------------------------------------------------ | 496| event | [BaseGestureEvent](./ts-gesture-customize-judge.md#basegestureevent) | Yes | Information about the current basic gesture event.| 497| current | [GestureRecognizer](#gesturerecognizer) | Yes | Gesture recognizer object that is about to respond.| 498| others | Array\<[GestureRecognizer](#gesturerecognizer)\> | Yes | Other gesture recognizer objects in the response chain.| 499 500**Return value** 501 502| Type | Description | 503| ------ | --------- | 504| [GestureJudgeResult](ts-gesture-customize-judge.md#gesturejudgeresult11) | Result of whether the gesture judgment is successful.| 505 506## Example 507 508### Example 1: Implementing Nested Scrolling 509 510This example demonstrates how to implement nested scrolling using **shouldBuiltInRecognizerParallelWith** and **onGestureRecognizerJudgeBegin**. The inner component takes precedence in responding to swipe gestures. When the inner component reaches the top or bottom, the outer component can then take over the scrolling. 511 512```ts 513// xxx.ets 514@Entry 515@Component 516struct FatherControlChild { 517 scroller: Scroller = new Scroller() 518 scroller2: Scroller = new Scroller() 519 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 520 private childRecognizer: GestureRecognizer = new GestureRecognizer() 521 private currentRecognizer: GestureRecognizer = new GestureRecognizer() 522 private lastOffset: number = 0 523 524 build() { 525 Stack({ alignContent: Alignment.TopStart }) { 526 Scroll(this.scroller) { // Outer scrollable container. 527 Column() { 528 Text("Scroll Area") 529 .width('90%') 530 .height(150) 531 .backgroundColor(0xFFFFFF) 532 .borderRadius(15) 533 .fontSize(16) 534 .textAlign(TextAlign.Center) 535 .margin({ top: 10 }) 536 Scroll(this.scroller2) { // Inner scrollable container. 537 Column() { 538 Text("Scroll Area2") 539 .width('90%') 540 .height(150) 541 .backgroundColor(0xFFFFFF) 542 .borderRadius(15) 543 .fontSize(16) 544 .textAlign(TextAlign.Center) 545 .margin({ top: 10 }) 546 Column() { 547 ForEach(this.arr, (item: number) => { 548 Text(item.toString()) 549 .width('90%') 550 .height(150) 551 .backgroundColor(0xFFFFFF) 552 .borderRadius(15) 553 .fontSize(16) 554 .textAlign(TextAlign.Center) 555 .margin({ top: 10 }) 556 }, (item: string) => item) 557 }.width('100%') 558 } 559 } 560 .id("inner") 561 .width('100%') 562 .height(800) 563 }.width('100%') 564 } 565 .id("outer") 566 .height(600) 567 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 568 .scrollBar(BarState.On) // The scrollbar is always displayed. 569 .scrollBarColor(Color.Gray) // The scrollbar color is gray. 570 .scrollBarWidth(10) // The scrollbar width is 10. 571 .edgeEffect(EdgeEffect.None) 572 .shouldBuiltInRecognizerParallelWith((current: GestureRecognizer, others: Array<GestureRecognizer>) => { 573 for (let i = 0; i < others.length; i++) { 574 let target = others[i].getEventTargetInfo(); 575 if (target) { 576 if (target.getId() == "inner" && others[i].isBuiltIn() && others[i].getType() == GestureControl.GestureType.PAN_GESTURE) { // Find the recognizer to form a parallel gesture. 577 this.currentRecognizer = current; // Save the recognizer of the current component. 578 this.childRecognizer = others[i]; // Save the recognizer to form a parallel gesture. 579 return others[i]; // Return the recognizer to form a parallel gesture. 580 } 581 } 582 } 583 return undefined; 584 }) 585 .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Array<GestureRecognizer>) => { // When gesture recognition is about to be successful, set the recognizer's enabled state based on the current component state. 586 if (current) { 587 let target = current.getEventTargetInfo(); 588 if (target) { 589 if (target.getId() == "outer" && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) { 590 if (others) { 591 for (let i = 0; i < others.length; i++) { 592 let target = others[i].getEventTargetInfo() as ScrollableTargetInfo; 593 if (target instanceof ScrollableTargetInfo && target.getId() == "inner") { // Identify the recognizer to work in parallel on the response chain. 594 let panEvent = event as PanGestureEvent; 595 if (target.isEnd()) { // Dynamically control the recognizer's enabled state based on the current component state and direction of movement. 596 if (panEvent && panEvent.offsetY < 0) { 597 this.childRecognizer.setEnabled(false) 598 this.currentRecognizer.setEnabled(true) 599 } else { 600 this.childRecognizer.setEnabled(true) 601 this.currentRecognizer.setEnabled(false) 602 } 603 } else if (target.isBegin()) { 604 if (panEvent.offsetY > 0) { 605 this.childRecognizer.setEnabled(false) 606 this.currentRecognizer.setEnabled(true) 607 } else { 608 this.childRecognizer.setEnabled(true) 609 this.currentRecognizer.setEnabled(false) 610 } 611 } else { 612 this.childRecognizer.setEnabled(true) 613 this.currentRecognizer.setEnabled(false) 614 } 615 } 616 } 617 } 618 } 619 } 620 } 621 return GestureJudgeResult.CONTINUE; 622 }) 623 .parallelGesture( // Bind a pan gesture as a dynamic controller. 624 PanGesture() 625 .onActionUpdate((event: GestureEvent)=>{ 626 if (this.childRecognizer.getState() != GestureRecognizerState.SUCCESSFUL || this.currentRecognizer.getState() != GestureRecognizerState.SUCCESSFUL) { // If neither recognizer is in the SUCCESSFUL state, no control is applied. 627 return; 628 } 629 let target = this.childRecognizer.getEventTargetInfo() as ScrollableTargetInfo; 630 let currentTarget = this.currentRecognizer.getEventTargetInfo() as ScrollableTargetInfo; 631 if (target instanceof ScrollableTargetInfo && currentTarget instanceof ScrollableTargetInfo) { 632 if (target.isEnd()) { // Adjust the enabled state of the gesture recognizers based on the current component state during movement. 633 if ((event.offsetY - this.lastOffset) < 0) { 634 this.childRecognizer.setEnabled(false) 635 if (currentTarget.isEnd()) { 636 this.currentRecognizer.setEnabled(false) 637 } else { 638 this.currentRecognizer.setEnabled(true) 639 } 640 } else { 641 this.childRecognizer.setEnabled(true) 642 this.currentRecognizer.setEnabled(false) 643 } 644 } else if (target.isBegin()) { 645 if ((event.offsetY - this.lastOffset) > 0) { 646 this.childRecognizer.setEnabled(false) 647 if (currentTarget.isBegin()) { 648 this.currentRecognizer.setEnabled(false) 649 } else { 650 this.currentRecognizer.setEnabled(true) 651 } 652 } else { 653 this.childRecognizer.setEnabled(true) 654 this.currentRecognizer.setEnabled(false) 655 } 656 } else { 657 this.childRecognizer.setEnabled(true) 658 this.currentRecognizer.setEnabled(false) 659 } 660 } 661 this.lastOffset = event.offsetY 662 }) 663 ) 664 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 665 } 666} 667``` 668 669### Example 2: Blocking Inner Container Gestures in Nested Scrolling 670 671This example demonstrates how to set the **exposeInnerGesture** parameter to **true** to enable a first-level **Tabs** container to intercept the swipe gestures of a nested second-level **Tabs** container, thereby triggering the swipe gestures of the built-in **Swiper** component of first-level **Tabs** container. 672You can define variables to record the index of the inner **Tabs** container and use this index to determine when to trigger the callback to block the swipe gestures of the outer **Tabs** container when the inner **Tabs** container reaches its boundaries. 673 674```ts 675// xxx.ets 676@Entry 677@Component 678struct Index { 679 @State currentIndex: number = 0 680 @State selectedIndex: number = 0 681 @State fontColor: string = '#182431' 682 @State selectedFontColor: string = '#007DFF' 683 innerSelectedIndex: number = 0 // Record the index of the inner Tabs container. 684 controller?: TabsController = new TabsController(); 685 @Builder 686 tabBuilder(index: number, name: string) { 687 Column() { 688 Text(name) 689 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 690 .fontSize(16) 691 .fontWeight(this.selectedIndex === index ? 500 : 400) 692 .lineHeight(22) 693 .margin({ top: 17, bottom: 7 }) 694 Divider() 695 .strokeWidth(2) 696 .color('#007DFF') 697 .opacity(this.selectedIndex === index ? 1 : 0) 698 }.width('100%') 699 } 700 build() { 701 Column() { 702 Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { 703 TabContent() { 704 Column().width('100%').height('100%').backgroundColor(Color.Green) 705 }.tabBar(this.tabBuilder(0, 'green')) 706 TabContent() { 707 Tabs() { 708 TabContent() { 709 Column().width('100%').height('100%').backgroundColor(Color.Blue) 710 }.tabBar(new SubTabBarStyle('blue')) 711 TabContent() { 712 Column().width('100%').height('100%').backgroundColor(Color.Pink) 713 }.tabBar(new SubTabBarStyle('pink')) 714 } 715 .onAnimationStart((index: number, targetIndex: number) => { 716 console.info('ets onGestureRecognizerJudgeBegin child:' + targetIndex) 717 this.innerSelectedIndex = targetIndex 718 }) 719 .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, 720 others: Array<GestureRecognizer>): GestureJudgeResult => { // When gesture recognition is about to be successful, set the recognizer's enabled state based on the current component state. 721 console.info('ets onGestureRecognizerJudgeBegin child') 722 if (current) { 723 let target = current.getEventTargetInfo(); 724 if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) { 725 console.info('ets onGestureRecognizerJudgeBegin child PAN_GESTURE') 726 let panEvent = event as PanGestureEvent; 727 if (panEvent && panEvent.velocityX < 0 && this.innerSelectedIndex === 1) { // The inner Tabs component has reached the end. 728 console.info('ets onGestureRecognizerJudgeBegin child reject end') 729 return GestureJudgeResult.REJECT; 730 } 731 if (panEvent && panEvent.velocityX > 0 && this.innerSelectedIndex === 0) { // The inner Tabs component has reached the beginning. 732 console.info('ets onGestureRecognizerJudgeBegin child reject begin') 733 return GestureJudgeResult.REJECT; 734 } 735 } 736 } 737 return GestureJudgeResult.CONTINUE; 738 }, true) 739 }.tabBar(this.tabBuilder(1, 'blue and pink')) 740 TabContent() { 741 Column().width('100%').height('100%').backgroundColor(Color.Brown) 742 }.tabBar(this.tabBuilder(2, 'brown')) 743 } 744 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 745 // Triggered when the switching animation starts. The target tab shows an underline. 746 this.selectedIndex = targetIndex 747 }) 748 } 749 } 750} 751``` 752 753  754 755 756### Example 3: Blocking Gestures to Obtain Properties 757 758This example demonstrates how to use the **onGestureRecognizerJudgeBegin** API to determine the gesture recognizer type and obtain corresponding properties. 759 760```ts 761// xxx.ets 762@Entry 763@Component 764struct Index { 765 @State message: string = 'Gesture'; 766 767 build() { 768 Column() { 769 Row({ space: 20 }) { 770 Text(this.message) 771 .width(400) 772 .height(80) 773 .fontSize(23) 774 }.margin(25) 775 } 776 .margin(50) 777 .width(400) 778 .height(200) 779 .borderWidth(2) 780 .gesture(TapGesture()) 781 .gesture(LongPressGesture()) 782 .gesture(PanGesture({ direction: PanDirection.Vertical })) 783 .gesture(PinchGesture()) 784 .gesture(RotationGesture()) 785 .gesture(SwipeGesture({ direction: SwipeDirection.Horizontal })) 786 // Bind a custom gesture recognizer judgment callback to the component. 787 .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, 788 others: Array<GestureRecognizer>) => { 789 if (current) { 790 // Check whether the gesture is a pan gesture. 791 if (current.getType() == GestureControl.GestureType.PAN_GESTURE) { 792 let target = current as PanRecognizer; 793 this.message = 'PanGesture\ndistance:' + target.getPanGestureOptions().getDistance() + '\nfingers:' + 794 target.getFingerCount() + '\nisFingerCountLimited:' + target.isFingerCountLimit(); 795 } 796 // Check whether the gesture is a long press gesture. 797 if (current.getType() == GestureControl.GestureType.LONG_PRESS_GESTURE) { 798 let target = current as LongPressRecognizer; 799 this.message = 'LongPressGesture\nfingers:' + target.getFingerCount() + '\nisFingerCountLimited:' + 800 target.isFingerCountLimit() + '\nrepeat:' + target.isRepeat() + '\nduration:' + target.getDuration(); 801 } 802 // Check whether the gesture is a pinch gesture. 803 if (current.getType() == GestureControl.GestureType.PINCH_GESTURE) { 804 let target = current as PinchRecognizer; 805 this.message = 'PinchGesture\ndistance:' + target.getDistance() + '\nfingers:' + 806 target.getFingerCount() + '\nisFingerCountLimited:' + target.isFingerCountLimit(); 807 } 808 // Check whether the gesture is a tap gesture. 809 if (current.getType() == GestureControl.GestureType.TAP_GESTURE) { 810 let target = current as TapRecognizer; 811 this.message = 'TapGesture\ncount:' + target.getTapCount() + '\nfingers:' + 812 target.getFingerCount() + '\nisFingerCountLimited:' + target.isFingerCountLimit(); 813 } 814 // Check whether the gesture is a rotation gesture. 815 if (current.getType() == GestureControl.GestureType.ROTATION_GESTURE) { 816 let target = current as RotationRecognizer; 817 this.message = 'RotationGesture\nangle:' + target.getAngle() + '\nfingers:' + 818 target.getFingerCount() + '\nisFingerCountLimited:' + target.isFingerCountLimit(); 819 } 820 // Check whether the gesture is a swipe gesture. 821 if (current.getType() == GestureControl.GestureType.SWIPE_GESTURE) { 822 let target = current as SwipeRecognizer; 823 this.message = 'SwipeGesture\ndirection:' + target.getDirection() + '\nfingers:' + 824 target.getFingerCount() + '\nisFingerCountLimited:' + target.isFingerCountLimit() + '\nspeed:' + 825 target.getVelocityThreshold(); 826 } 827 } 828 return GestureJudgeResult.CONTINUE; 829 }) 830 } 831} 832``` 833 834  835
