HarmonyOS Swiper嵌套的页面包含Canvas时，如何让Canvas可以响应左右滑动事件，但是不响应上下滑动

Swiper嵌套的页面包含Canvas时，如何让Canvas可以响应左右滑动事件我这边使用下面的方式给Canvas加了滑动事件监听，但是没触发

.priorityGesture(GestureGroup(GestureMode.Exclusive,
  SwipeGesture()
    .onAction((event: GestureEvent) => {
      if (event && this.klineQuotaModel) {
      }
    })
))

HarmonyOS

zbw_apple

2024-12-18 16:49:37

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

如下demo，可以触发onAction事件，且在Canvas区域滑动时，Swiper不滑动

@Component
struct CanvasExample1 {
  //用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  //用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Column() {
      //在canvas中调用CanvasRenderingContext2D对象。
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          //可以在这里绘制内容。
          this.context.strokeRect(50, 50, 200, 150);
        })
        .priorityGesture(GestureGroup(GestureMode.Exclusive,
          SwipeGesture()
            .onAction((event: GestureEvent) => {
              console.log('Canvas响应，swiper不响应')
            })
        ))

        .hitTestBehavior(HitTestMode.Block)
        .width('80%')
        .height('50%')


      Text('Canvas')
        .width('80%')
        .height('50%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Red)
  }
}

@Entry
@Component
struct Index47 {
  private swiperController: SwiperController = new SwiperController()

  build() {
    Swiper(this.swiperController) {
      Text('0')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)

      Text('1')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontSize(30)

      Text('2')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30)

      CanvasExample1()


    }

    .loop(false)

  }
}