import { hilog } from "@kit.PerformanceAnalysisKit"

// 点击事件
@Entry
@Component
struct ClickExample {

  @State text: string = ''

  onPageShow(): void {
    hilog.info(0x0001, 'ClickExample', 'onPageShow')
  }

  build() {
    NavDestination() {
      Column() {
        Row({ space: 20 }) {
          Button('Click').width(100).height(40)
            .onClick((event?: ClickEvent) => {
              if (event) {
                this.text = 'Click Point:' + '\n  windowX:' + event.windowX + '\n  windowY:' + event.windowY
                  + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
                  + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
                  + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' +
                event.timestamp;
              }
            }, 20)
          Button('Click').width(200).height(50)
            .onClick((event?: ClickEvent) => {
              if (event) {
                this.text = 'Click Point:' + '\n  windowX:' + event.windowX + '\n  windowY:' + event.windowY
                  + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
                  + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
                  + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' +
                event.timestamp;
              }
            }, 20)
        }.margin(20)
        Text(this.text).margin(15)
      }.width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

@Builder
export function ClickExampleBuilder(name: string, param: Object) {
  ClickExample()
}

// 触摸事件
@Entry
@Component
struct TouchExample {
  @State text: string = ''
  @State eventType: string = ''

  build() {
    NavDestination() {
      Column() {
        Button('Touch').height(40).width(100)
          .onTouch((event?: TouchEvent) => {
            if (event) {
              if (event.type === TouchType.Down) {
                this.eventType = 'Down'
              }
              if (event.type === TouchType.Up) {
                this.eventType = 'Up'
              }
              if (event.type === TouchType.Move) {
                this.eventType = 'Move'
              }
              this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
                + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
                + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
                + event.target.area.width + '\nheight:' + event.target.area.height
            }
          })
        Button('Touch').height(50).width(200).margin(20)
          .onTouch((event?: TouchEvent) => {
            if (event) {
              if (event.type === TouchType.Down) {
                this.eventType = 'Down'
              }
              if (event.type === TouchType.Up) {
                this.eventType = 'Up'
              }
              if (event.type === TouchType.Move) {
                this.eventType = 'Move'
              }
              this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
                + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
                + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
                + event.target.area.width + '\nheight:' + event.target.area.height
            }
          })
        Text(this.text)
      }.width('100%').padding(30)
    }
    .width('100%')
    .height('100%')
  }
}

@Builder
export function TouchExampleBuilder() {
  TouchExample()
}

// xxx.ets
@Entry
@Component
struct OnAccessibilityHoverEventExample {
  @State hoverText: string = 'no hover';
  @State color: Color = Color.Blue;

  build() {
    Column({ space: 20 }) {
      Button(this.hoverText)
        .width(180).height(80)
        .backgroundColor(this.color)
        .onAccessibilityHover((isHover: boolean, event: AccessibilityHoverEvent) => {
          // 通过onAccessibilityHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
          if (isHover) {
            this.hoverText = 'hover';
            this.color = Color.Pink;
          } else {
            this.hoverText = 'no hover';
            this.color = Color.Blue;
          }
        })
    }.padding({ top: 30 }).width('100%')
  }
}

class MyButtonModifier implements GestureModifier {
  supportDoubleTap: boolean = true

  actionBack?: ((log: string) => void)

  applyGesture(event: UIGestureEvent): void {
    if (this.supportDoubleTap) {
      event.addGesture(
        new TapGestureHandler({ count: 2, fingers: 1 })
          .tag("aaa")
          .onAction((event: GestureEvent) => {
            if (this.actionBack) {
              this.actionBack("button tap")
            }
          })
      )
    } else {
      event.addGesture(
        new PanGestureHandler()
          .onActionStart(()=>{
            if (this.actionBack) {
              this.actionBack("Pan start")
            }
          })
          .onActionEnd(() =>{
            if (this.actionBack) {
              this.actionBack("Pan end")
            }
          })
          .onActionCancel(() => {
            if (this.actionBack) {
              this.actionBack("Pan cancel")
            }
          })

      )
    }
  }
}

// 动态手势设置
@Entry
@Component
struct ActiveGesture {
  @State modifier: MyButtonModifier = new MyButtonModifier()
  @State text: string = ''

  onPageShow(): void {

  }

  aboutToAppear(): void {
    this.modifier.actionBack = (log: string) => {
      console.log("actionBack " + log)
      this.text = log
      this.modifier.supportDoubleTap = !this.modifier.supportDoubleTap
    }
  }

  build() {
    NavDestination() {
      Row() {
        Column() {
          Column()
            .gestureModifier(this.modifier)
            .width(500)
            .height(200)
            .backgroundColor(Color.Blue)

          Text(this.text)
            .fontColor(Color.Gray)
            .fontSize(15)
            .width("100%")
            .height(30)
            .backgroundColor(Color.Yellow)
        }
        .width('100%')
      }
      .height('100%')
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function ActiveGestureBuilder() {
  ActiveGesture()
}

// 触摸热区设置
@Entry
@Component
struct TouchTargetExample {
  @State text: string = ""

  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Text("{x:0,y:0,width:'50%',height:'100%'}")
        // 热区宽度为按钮的一半，点击右侧无响应
        Button("button1")
          .responseRegion({
            x: 0,
            y: 0,
            width: '50%',
            height: '100%'
          })
          .onClick(() => {
            this.text = 'button1 clicked'
          })

        // 为一个组件添加多个热区
        Text("[{x:'100%',y:0,width:'50%',height:'100%'}," +
          "\n{ x: 0, y: 0, width: '50%', height: '100%' }]")
        Button("button2")
          .responseRegion([
            {
              x: '100%',
              y: 0,
              width: '50%',
              height: '100%'
            }, // 第一个热区宽度为按钮的一半，点击按钮右侧宽度一半区域，点击事件生效
            {
              x: 0,
              y: 0,
              width: '50%',
              height: '100%'
            }// 第二个热区宽度为按钮的一半，点击button2左半边，点击事件生效
          ])
          .onClick(() => {
            this.text = 'button2 clicked'
          })
        // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效
        Text("{x:0,y:'100%',width:'100%',height:'100%'}")
        Button("button3")
          .responseRegion({
            x: 0,
            y: '100%',
            width: '100%',
            height: '100%'
          })
          .onClick(() => {
            this.text = 'button3 clicked'
          })

        Text(this.text).margin({ top: 50 })
      }.width('100%').margin({ top: 10 })
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function TouchTargetExampleBuilder() {
  TouchTargetExample()
}

// 触摸测试控制
@Entry
@Component
struct HitTestBehaviorExample {
  build() {
    NavDestination() {
      // outer stack
      Stack() {
        Button('outer button')
          .onTouch((event) => {
            console.info('outer button touched type: ' + (event as TouchEvent).type)
          })
        // inner stack
        Stack() {
          Button('inner button')
            .onTouch((event) => {
              console.info('inner button touched type: ' + (event as TouchEvent).type)
            })
        }
        .width("100%").height("100%")
        .hitTestBehavior(HitTestMode.Block)
        .onTouch((event) => {
          console.info('stack touched type: ' + (event as TouchEvent).type)
        })

        Text('Transparent')
          .hitTestBehavior(HitTestMode.Transparent)
          .width("100%").height("100%")
          .onTouch((event) => {
            console.info('text touched type: ' + (event as TouchEvent).type)
          })
      }.width(300).height(300)
    }
    .width("100%")
    .height("100%")
  }
}

@Builder
export function HitTestBehaviorExampleBuilder() {
  HitTestBehaviorExample()
}

// 绑定手势方法
@Entry
@Component
struct GestureSettingsExample {
  @State priorityTestValue: string = ''
  @State parallelTestValue: string = ''

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text('TapGesture:' + this.priorityTestValue).fontSize(28)
            .gesture(
              TapGesture()
                .onAction((event: GestureEvent) => {
                  this.priorityTestValue += '\nText'
                }))
        }
        .height(200)
        .width(250)
        .padding(20)
        .margin(20)
        .border({ width: 3 })
        // 设置为priorityGesture时，点击文本会忽略Text组件的TapGesture手势事件，优先识别父组件Column的TapGesture手势事件
        .priorityGesture(
          TapGesture()
            .onAction((event: GestureEvent) => {
              this.priorityTestValue += '\nColumn1'
            }), GestureMask.IgnoreInternal)

        Column() {
          Text('TapGesture:' + this.parallelTestValue).fontSize(28)
            .gesture(
              TapGesture()
                .onAction((event: GestureEvent) => {
                  this.parallelTestValue += '\nText'
                }))
        }
        .height(200)
        .width(250)
        .padding(20)
        .margin(20)
        .border({ width: 3 })
        // 设置为parallelGesture时，点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件
        .parallelGesture(
          TapGesture()
            .onAction((event: GestureEvent) => {
              this.parallelTestValue += '\nColumn2'
            }), GestureMask.Normal)
      }
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function GestureSettingsExampleBuilder() {
  GestureSettingsExample()
}

// xxx.ets
@Entry
@Component
struct TapGestureExample {
  @State value: string = ''

  build() {
    Column() {
      // 单指双击文本触发手势事件
      Text('Click twice').fontSize(28)
        .gesture(
        TapGesture({ count: 2 })
          .onAction((event: GestureEvent) => {
            if (event) {
              this.value = JSON.stringify(event.fingerList[0])
            }
          })
        )
      Text(this.value)
    }
    .height(200)
    .width(300)
    .padding(20)
    .border({ width: 3 })
    .margin(30)
  }
}

// 长按手势
@Entry
@Component
struct LongPressGestureExample {
  @State count: number = 0

  build() {
    NavDestination() {
      Column() {
        Text('LongPress onAction:' + this.count).fontSize(28)// 单指长按文本触发该手势事件
          .gesture(
            LongPressGesture({ repeat: true })// 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
              .onAction((event: GestureEvent) => {
                if (event && event.repeat) {
                  this.count++
                }
              })// 长按动作一结束触发
              .onActionEnd((event: GestureEvent) => {
                this.count = 0
              })
          )
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(30)
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function LongPressGestureExampleBuilder() {
  LongPressGestureExample()
}

@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })

  build() {
    Column() {
      Column() {
        Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
      }
      .height(200)
      .width(300)
      .padding(20)
      .border({ width: 3 })
      .margin(50)
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
      // 左右滑动触发该手势事件
      .gesture(
      PanGesture(this.panOption)
        .onActionStart((event: GestureEvent) => {
          console.info('Pan start')
        })
        .onActionUpdate((event: GestureEvent) => {
          if (event) {
            this.offsetX = this.positionX + event.offsetX
            this.offsetY = this.positionY + event.offsetY
          }
        })
        .onActionEnd((event: GestureEvent) => {
          this.positionX = this.offsetX
          this.positionY = this.offsetY
          console.info('Pan end')
        })
      )

      Button('修改PanGesture触发条件')
        .onClick(() => {
          // 将PanGesture手势事件触发条件改为双指以任意方向滑动
          this.panOption.setDirection(PanDirection.All)
          this.panOption.setFingers(2)
        })
    }
  }
}

// 三指捏合手势
@Entry
@Component
struct PinchGestureExample {
  @State scaleValue: number = 1
  @State pinchValue: number = 1
  @State pinchX: number = 0
  @State pinchY: number = 0

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text('PinchGesture scale:\n' + this.scaleValue)
          Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
        }
        .height(200)
        .width(300)
        .padding(20)
        .border({ width: 3 })
        .margin({ top: 100 })
        .scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
        // 三指捏合触发该手势事件
        .gesture(
          PinchGesture({ fingers: 3 })
            .onActionStart((event: GestureEvent) => {
              console.info('Pinch start')
            })
            .onActionUpdate((event: GestureEvent) => {
              if (event) {
                this.scaleValue = this.pinchValue * event.scale
                this.pinchX = event.pinchCenterX
                this.pinchY = event.pinchCenterY
              }
            })
            .onActionEnd((event: GestureEvent) => {
              this.pinchValue = this.scaleValue
              console.info('Pinch end')
            })
        )
      }.width('100%')
    }
    .width("100%")
    .height("100%")
  }
}

@Builder
export function PinchGestureExampleBuilder() {
  PinchGestureExample()
}

// 旋转手势
@Entry
@Component
struct RotationGestureExample {
  @State angle: number = 0
  @State rotateValue: number = 0

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text('RotationGesture angle:' + this.angle)
        }
        .height(200)
        .width(300)
        .padding(20)
        .border({ width: 3 })
        .margin(80)
        .rotate({ angle: this.angle })
        // 双指旋转触发该手势事件
        .gesture(
          RotationGesture()
            .onActionStart((event: GestureEvent) => {
              console.info('Rotation start')
            })
            .onActionUpdate((event: GestureEvent) => {
              if (event) {
                this.angle = this.rotateValue + event.angle
              }
            })
            .onActionEnd((event: GestureEvent) => {
              this.rotateValue = this.angle
              console.info('Rotation end')
            })
        )
      }.width('100%')
    }
    .width("100%")
    .height("100%")
  }
}

@Builder
export function RotationGestureExampleBuilder() {
  RotationGestureExample()
}

// 清扫手势
@Entry
@Component
struct SwipeGestureExample {
  @State rotateAngle: number = 0
  @State speed: number = 1

  build() {
    NavDestination() {
      Column() {
        Column() {
          Text("SwipeGesture speed\n" + this.speed)
          Text("SwipeGesture angle\n" + this.rotateAngle)
        }
        .border({ width: 3 })
        .width(300)
        .height(200)
        .margin(100)
        .rotate({ angle: this.rotateAngle })
        // 单指竖直方向滑动时触发该事件
        .gesture(
          SwipeGesture({ direction: SwipeDirection.Vertical })
            .onAction((event: GestureEvent) => {
              if (event) {
                this.speed = event.speed
                this.rotateAngle = event.angle
              }
            })
        )
      }.width('100%')
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function SwipeGestureExampleBuilder() {
  SwipeGestureExample()
}

@Entry
@Component
struct GestureGroupExample {
  @State count: number = 0
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  @State borderStyles: BorderStyle = BorderStyle.Solid

  build() {
    Column() {
      Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .fontSize(15)
    }
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
    .height(150)
    .width(200)
    .padding(20)
    .margin(20)
    .border({ width: 3, style: this.borderStyles })
    .gesture(
      // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
      GestureGroup(GestureMode.Sequence,
        LongPressGesture({ repeat: true })
          .onAction((event?: GestureEvent) => {
            if (event && event.repeat) {
              this.count++
            }
            console.info('LongPress onAction')
          }),
        PanGesture()
          .onActionStart(() => {
            this.borderStyles = BorderStyle.Dashed
            console.info('pan start')
          })
          .onActionUpdate((event?: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
            console.info('pan update')
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            this.borderStyles = BorderStyle.Solid
            console.info('pan end')
          })
      )
        .onCancel(() => {
          console.info('sequence gesture canceled')
        })
    )
  }
}

import { promptAction } from '@kit.ArkUI';

// 手势判定 demo
@Entry
@Component
struct GestureJudgeExample {
  scroller: Scroller = new Scroller()

  build() {
    NavDestination() {
      Scroll(this.scroller) {
        Column({ space: 8 }) {
          Text("Drag 上下两层 上层绑定长按，下层绑定拖拽。先长按后平移上半区红色区域只会响应长按，先长按后平移下半区蓝色区域只会响应拖拽")
            .width('100%')
            .fontSize(20)
            .fontColor('0xffdd00')
            .backgroundColor(0xeeddaa00)
          Stack({ alignContent: Alignment.Center }) {
            Column() {
              // 模拟上半区和下半区
              Stack().width('200vp').height('100vp').backgroundColor(Color.Red)
              Stack().width('200vp').height('100vp').backgroundColor(Color.Blue)
            }.width('200vp').height('200vp')

            // Stack的下半区是绑定了拖动手势的图像区域。
            Image($r('sys.media.ohos_app_icon'))
              .draggable(true)
              .onDragStart(() => {
                promptAction.showToast({ message: "Drag 下半区蓝色区域，Image响应" })
              })
              .width('200vp').height('200vp')
            // Stack的上半区是绑定了长按手势的浮动区域。
            Stack() {
            }
            .width('200vp')
            .height('200vp')
            .hitTestBehavior(HitTestMode.Transparent)
            .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
              // 确定tag标志是否有值
              if (gestureInfo.tag) {
                console.log("gestureInfo tag" + gestureInfo.tag.toString())
              }
              console.log("gestureInfo Type " + gestureInfo.type.toString() + " isSystemGesture " +
              gestureInfo.isSystemGesture);
              console.log("pressure " + event.pressure + " fingerList.length " + event.fingerList.length
                + " timeStamp " + event.timestamp + " sourceType " + event.source.toString() + " titleX " +
              event.tiltX + " titleY " + event.tiltY + " sourcePool " + event.sourceTool.toString());
              // 如果是长按类型手势，判断点击的位置是否在上半区
              if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
                if (event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
                  return GestureJudgeResult.CONTINUE
                } else {
                  return GestureJudgeResult.REJECT
                }
              }
              return GestureJudgeResult.CONTINUE
            })
            .gesture(GestureGroup(GestureMode.Parallel,
              LongPressGesture()
                .onAction((event: GestureEvent) => {
                  promptAction.showToast({ message: "LongPressGesture 长按上半区 红色区域，红色区域响应" })
                })
                .tag("tap111")
            ))

          }.width('100%')
        }.width('100%')
      }
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function GestureJudgeExampleBuilder() {
  GestureJudgeExample()
}

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct GestureJudgeExample2 {
  scroller: Scroller = new Scroller()

  build() {
    NavDestination() {
      Scroll(this.scroller) {
        Column({ space: 8 }) {
          Text("Drag 上下两层 上层绑定长按，下层绑定拖拽。先长按后平移上半区红色区域只会响应长按，先长按后平移下半区蓝色区域只会响应拖拽")
            .width('100%')
            .fontSize(20)
            .fontColor('0xffdd00')
            .backgroundColor(0xeeddaa00)
          Stack({ alignContent: Alignment.Center }) {
            Column() {
              // 模拟上半区和下半区
              Stack().width('200vp').height('100vp').backgroundColor(Color.Red)
              Stack().width('200vp').height('100vp').backgroundColor(Color.Blue)
            }.width('200vp').height('200vp')

            // Stack的下半区是绑定了拖动手势的图像区域。
            Image($r('sys.media.ohos_app_icon'))
              .draggable(true)
              .onDragStart(() => {
                promptAction.showToast({ message: "Drag 下半区蓝色区域，Image响应" })
              })
              .width('200vp').height('200vp')
            // Stack的上半区是绑定了长按手势的浮动区域。
            Stack() {
            }
            .width('200vp')
            .height('200vp')
            .hitTestBehavior(HitTestMode.Transparent)
            .onGestureJudgeBegin((gestureInfo: GestureInfo, event: BaseGestureEvent) => {
              // 确定tag标志是否有值
              if (gestureInfo.tag) {
                console.log("gestureInfo tag" + gestureInfo.tag.toString())
              }
              console.log("gestureInfo Type " + gestureInfo.type.toString() + " isSystemGesture " +
              gestureInfo.isSystemGesture);
              console.log("pressure " + event.pressure + " fingerList.length " + event.fingerList.length
                + " timeStamp " + event.timestamp + " sourceType " + event.source.toString() + " titleX " +
              event.tiltX + " titleY " + event.tiltY + " sourcePool " + event.sourceTool.toString());
              // 如果是长按类型手势，判断点击的位置是否在上半区
              if (gestureInfo.type == GestureControl.GestureType.LONG_PRESS_GESTURE) {
                if (event.fingerList.length > 0 && event.fingerList[0].localY < 100) {
                  return GestureJudgeResult.CONTINUE
                } else {
                  return GestureJudgeResult.REJECT
                }
              }
              return GestureJudgeResult.CONTINUE
            })
            .gesture(GestureGroup(GestureMode.Parallel,
              LongPressGesture()
                .onAction((event: GestureEvent) => {
                  promptAction.showToast({ message: "LongPressGesture 长按上半区 红色区域，红色区域响应" })
                })
                .tag("tap111")
            ))

          }.width('100%')
        }.width('100%')
      }
    }.width("100%")
    .height("100%")
  }
}

@Builder
export function GestureJudgeExample2Builder() {
  GestureJudgeExample2()
}

@Entry
@Component
struct FatherControlChild {
  scroller: Scroller = new Scroller()
  scroller2: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  private childRecognizer: GestureRecognizer = new GestureRecognizer()
  private currentRecognizer: GestureRecognizer = new GestureRecognizer()
  private lastOffset: number = 0

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) { // 外部滚动容器
        Column() {
          Text("Scroll Area")
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
          Scroll(this.scroller2) { // 内部滚动容器
            Column() {
              Text("Scroll Area2")
                .width('90%')
                .height(150)
                .backgroundColor(0xFFFFFF)
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .margin({ top: 10 })
              Column() {
                ForEach(this.arr, (item: number) => {
                  Text(item.toString())
                    .width('90%')
                    .height(150)
                    .backgroundColor(0xFFFFFF)
                    .borderRadius(15)
                    .fontSize(16)
                    .textAlign(TextAlign.Center)
                    .margin({ top: 10 })
                }, (item: string) => item)
              }.width('100%')
            }
          }
          .id("inner")
          .width('100%')
          .height(800)
        }.width('100%')
      }
      .id("outer")
      .height(600)
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .edgeEffect(EdgeEffect.None)
      .shouldBuiltInRecognizerParallelWith((current: GestureRecognizer, others: Array<GestureRecognizer>) => {
        for (let i = 0; i < others.length; i++) {
          let target = others[i].getEventTargetInfo();
          if (target) {
            if (target.getId() == "inner" && others[i].isBuiltIn() && others[i].getType() == GestureControl.GestureType.PAN_GESTURE) { // 找到将要组成并行手势的识别器
              this.currentRecognizer = current; // 保存当前组件的识别器
              this.childRecognizer = others[i]; // 保存将要组成并行手势的识别器
              return others[i]; // 返回将要组成并行手势的识别器
            }
          }
        }
        return undefined;
      })
      .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer, others: Array<GestureRecognizer>) => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态
        if (current) {
          let target = current.getEventTargetInfo();
          if (target) {
            if (target.getId() == "outer" && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
              if (others) {
                for (let i = 0; i < others.length; i++) {
                  let target = others[i].getEventTargetInfo() as ScrollableTargetInfo;
                  if (target instanceof ScrollableTargetInfo && target.getId() == "inner") { // 找到响应链上对应并行的识别器
                    let panEvent = event as PanGestureEvent;
                    if (target.isEnd()) { // 根据当前组件状态以及移动方向动态控制识别器使能状态
                      if (panEvent && panEvent.offsetY < 0) {
                        this.childRecognizer.setEnabled(false)
                        this.currentRecognizer.setEnabled(true)
                      } else {
                        this.childRecognizer.setEnabled(true)
                        this.currentRecognizer.setEnabled(false)
                      }
                    } else if (target.isBegin()) {
                      if (panEvent.offsetY > 0) {
                        this.childRecognizer.setEnabled(false)
                        this.currentRecognizer.setEnabled(true)
                      } else {
                        this.childRecognizer.setEnabled(true)
                        this.currentRecognizer.setEnabled(false)
                      }
                    } else {
                      this.childRecognizer.setEnabled(true)
                      this.currentRecognizer.setEnabled(false)
                    }
                  }
                }
              }
            }
          }
        }
        return GestureJudgeResult.CONTINUE;
      })
      .parallelGesture( // 绑定一个Pan手势作为动态控制器
        PanGesture()
          .onActionUpdate((event: GestureEvent)=>{
            if (this.childRecognizer.getState() != GestureRecognizerState.SUCCESSFUL || this.currentRecognizer.getState() != GestureRecognizerState.SUCCESSFUL) { // 如果识别器状态不是SUCCESSFUL，则不做控制
              return;
            }
            let target = this.childRecognizer.getEventTargetInfo() as ScrollableTargetInfo;
            let currentTarget = this.currentRecognizer.getEventTargetInfo() as ScrollableTargetInfo;
            if (target instanceof ScrollableTargetInfo && currentTarget instanceof ScrollableTargetInfo) {
              if (target.isEnd()) { // 在移动过程中实时根据当前组件状态，控制识别器的开闭状态
                if ((event.offsetY - this.lastOffset) < 0) {
                  this.childRecognizer.setEnabled(false)
                  if (currentTarget.isEnd()) {
                    this.currentRecognizer.setEnabled(false)
                  } else {
                    this.currentRecognizer.setEnabled(true)
                  }
                } else {
                  this.childRecognizer.setEnabled(true)
                  this.currentRecognizer.setEnabled(false)
                }
              } else if (target.isBegin()) {
                if ((event.offsetY - this.lastOffset) > 0) {
                  this.childRecognizer.setEnabled(false)
                  if (currentTarget.isBegin()) {
                    this.currentRecognizer.setEnabled(false)
                  } else {
                    this.currentRecognizer.setEnabled(true)
                  }
                } else {
                  this.childRecognizer.setEnabled(true)
                  this.currentRecognizer.setEnabled(false)
                }
              } else {
                this.childRecognizer.setEnabled(true)
                this.currentRecognizer.setEnabled(false)
              }
            }
            this.lastOffset = event.offsetY
          })
      )
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}