Progress触摸热区增大demo？

Question

如题：Progress触摸热区增大demo？

Answer 1

@Component
export struct sliderExample {
  @State text: string = '哈哈哈'
  @State value: number = 40;
  flagValue: number = 0
  build() {
    Stack() {
      Text(this.text).fontSize(20)
      Row() {
      }
      .onClick(() => {
        this.text = '上方横条onclick'
      })
      .backgroundColor(Color.Orange)
      .width('100%')
      .height(24)
      .position({ x: 0, y: '100%' })
      .markAnchor({ x: 0, y: 96 })
      Row() { }
      .onClick(() => { this.text = '下方横条onclick' })
      .backgroundColor(Color.Pink)
      .width('100%')
      .height(24)
      .position({ x: 0, y: '100%' })
      .markAnchor({ x: 0, y: 48 })
      Row() {
        Slider({ style: SliderStyle.OutSet, value: this.value })
          .blockSize({ width: 6, height: 6 })
          .blockBorderColor(Color.White)
          .blockBorderWidth(5)
          .height(24)
          .trackThickness(3)
          .backgroundColor(Color.Red)
          .onChange((value)=>{
            this.value = value
          })
      }
      .position({ x: 0, y: '100%' })
      .markAnchor({ x: 0, y: 72 })
      .backgroundColor('rgba(255, 255,255,0.5)')
      .responseRegion([{ x: 0, y: 0, width: '100%', height: '100%' },
        { x: 0, y: '100%', width: '100%', height: '100%' },
        { x: 0, y: '-100%', width: '100%', height: '100%' }])
      .hitTestBehavior(HitTestMode.Transparent)
      .gesture(
        PanGesture(new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }))
          .onActionStart(() => {
            this.flagValue = this.value
          })
          .onActionUpdate((event?: GestureEvent) => {
            if (event) {
              this.value = this.flagValue + (event.offsetX / 3)
            }
          })
      )
    }
    .backgroundColor(Color.Green)
    .width('100%')
    .height('100%')
  }
}