HarmonyOS 鸿蒙Next 手势冲突如何解决

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 手势冲突如何解决

我有一个Scroll套着一个image组件,image组件是一个长图,所以scroll可以上下滚动
1、我希望拖动image可以导致scroll上下滚动
2、我希望scroll滚动到顶部时继续下拖,执行我写的一些方法
3、我希望scroll滚动到底部时继续上拖,执行我写的一些方法

@Entry

@Component

struct Index {

  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })

  @State offsetX: number = 0

  @State offsetY: number = 0

  @State positionX: number = 0

  @State positionY: number = 0

  build() {

    Column() {

      //因为有长图情况,所以这里使用滚动组件,

      Scroll() {

        //长图

        Image(‘http://file-01.***.com/img/view/id/2424183234/sz/src’)

      }.width(‘100%’)

      .height(‘100%’)

      .backgroundColor(Color.Red)

    }

    .gesture(

      //我希望scroll滚动到顶部继续向 下拖动,可以处理我自己的一些逻辑

      PanGesture(this.panOption)

        .onActionUpdate((event?: GestureEvent) => {

          if (event && this.offsetY >= 0) {

            this.offsetX = this.positionX + event.offsetX

            this.offsetY = this.positionY + event.offsetY

            console.log(“WYBDrag”, "offsetX = " + this.offsetX + "  offsetY = " + this.offsetY)

          }

        })

        .onActionEnd(() => {

          this.positionX = this.offsetX

          this.positionY = this.offsetY

          console.info(‘Pan end’)

          if (this.positionY > 200) {

            //处理一些特殊操作

          }

          this.offsetX = 0

          this.offsetY = 0

          this.positionX = 0

          this.positionY = 0

        })

    )

  }

}

2 回复

参考以下:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical})
  [@State](/user/State) offsetX: number = 0
  [@State](/user/State) offsetY: number = 0
  [@State](/user/State) positionX: number = 0
  [@State](/user/State) positionY: number = 0
  [@State](/user/State) yOffset:number = 0
  private scrollerForScroll: Scroller = new Scroller()
  build() {
    Column() {
      //因为有长图情况,所以这里使用滚动组件,
      Scroll(this.scrollerForScroll) {
        //长图
        Image($r('app.media.hello')).size({ width: 400, height: 1050 })
          .gesture(
            TapGesture()
              .onAction(() => {
                console.info('Text1111 TapGesture is onAction');
              }))
      }
      .width('100%')
      .height('100%')
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset)
        this.yOffset = yOffset
      })
      .parallelGesture(
        PanGesture(this.panOption)
          .onActionStart((event?: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event?: GestureEvent) => {
            if (event && this.offsetY >= 0) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
              console.log("WYBDrag", "offsetX = " + this.offsetX + " offsetY = " + this.offsetY)
            }
          })
          .onActionEnd(() => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
            // 滑动到底部
            if (this.scrollerForScroll.isAtEnd()) {
              //处理一些特殊操作
              console.log("处理一些特殊操作11")
            }
            // 滑动到顶部
            if(this.yOffset == 0 && !this.scrollerForScroll.isAtEnd()){
              console.log("处理一些特殊操作22")
            }
            this.offsetX = 0
            this.offsetY = 0
            this.positionX = 0
            this.positionY = 0
          }),GestureMask.Normal)
      .backgroundColor(Color.Red)
    }
  }
}

HarmonyOS 鸿蒙Next手势冲突问题,通常发生在多个手势同时绑定到同一组件或父子组件间手势相互影响时。以下是一些解决方案:

  1. 手势事件类型设置

    • 默认情况下,手势事件为非冒泡事件。若希望手势事件能冒泡,即子组件不响应时父组件能响应,可使用parallelGesture实现并行手势处理。
    • 当父子组件绑定相同手势时,子组件默认优先识别。若希望父组件优先,可使用priorityGesture
  2. 手势组(GestureGroup)

    • 使用GestureGroup结合GestureMode来管理不同手势的触发逻辑。例如,GestureMode.Exclusive可用于互斥手势,GestureMode.Sequence用于顺序手势,GestureMode.Parallel用于并行手势。
  3. 手势透传与拦截

    • 若在Stack布局中希望某组件不响应手势而透传给其他组件,可在该组件的触摸事件处理中调用consumeTouchEvent(false)方法。
  4. 代码实现与调试

    • 根据具体需求调整手势绑定逻辑,并在代码中添加必要的日志输出,以便调试和验证手势事件的处理流程。

鸿蒙Next教程学学https://www.itying.com/category-93-b0.html

回到顶部