HarmonyOS 鸿蒙Next 如何实现onTouch事件分发

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

HarmonyOS 鸿蒙Next 如何实现onTouch事件分发
我通过设置最外层Column的onTouch事件,实现了通过监听Y轴偏移量实现了二楼下拉动效。但是我的一楼视图中包含了Swiper组件,Swiper组件中又包含了Web组件,在我横向切换Swiper时或垂直滑动web组件时,最外层的Column也会接收到OnTouch事件,产生Y轴偏移。这种场景下,我该如何处理手势冲突。

5 回复

是否可理解为拦截最外层Column的OnTouch事件?

拦截最外层Column的OnTouch事件,可以在子组件上设置hitTestBehavior(HitTestMode.Block)属性,设置后其组件只响应自身触摸,会阻塞父组件和兄弟组件的响应触摸;

对应的触摸说明可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5#hittestmode枚举说明

实现效果可参考如下代码实现:

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

@Entry
@Component
struct SwiperIndex {
  @State message: string = 'Hello World';
  private swiperController: SwiperController = new SwiperController()
  private swiperShowNumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.swiperShowNumbers, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(90)
        })
      }
      // 只响应自身的滑动事件, 父组件的onTouch事件不会触发
      .hitTestBehavior(HitTestMode.Block)
      .autoPlay(false)
      .cachedCount(3)
      .curve(Curve.Linear)
      .backgroundColor(Color.Green)

      Row({ space: 100 }) {
        // 自身的点击事件和父组件的onTouch事件会触发
        Button('上一个').onClick(() => {
          this.swiperController.showPrevious()
        })

        // 只响应自身的点击事件, 父组件的onTouch事件不会触发
        Button('下一个').onClick(() => {
          this.swiperController.showNext()
        })
          .hitTestBehavior(HitTestMode.Block)
      }
      .margin(5)
    }
    .width('100%')
    .height("80%")
    .onTouch(() => {
      promptAction.showToast({
        message: "onTouch触发"
      })
    })
    .margin({ top: 5})
  }
}

更多关于HarmonyOS 鸿蒙Next 如何实现onTouch事件分发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬好,通过给Swiper设置HitTestMode.Block,确实可以实现swiper组件滑动时,不会误触发colunm的onTouch事件。但是由于我的swiper组件是全屏宽高,所以设置完以后无论触摸哪里,都触发不了colunm的onTouch事件了。

如果我没讲明白的话,这里有我写的demo,https://gitee.com/zlj_com/second-floor,大概要实现的就是这样子,但目前切tab,以及tab中列表上下滚动时,都会触发最外层的onTouch事件,大佬有时间的话可以看看。感谢。

swiper组件是全屏宽高,也就是swiper组件和column组件是在同一区域嘛,目前没有无法分辨出是点击事件还是触摸事件,因为点击时也会进行触摸,

在HarmonyOS(鸿蒙)系统中实现onTouch事件分发,主要依赖于组件的事件处理机制。以下是如何实现这一功能的核心步骤:

  1. 事件监听:首先,需要在目标组件上设置事件监听器。在鸿蒙的组件框架中,这通常通过组件的setTouchListener方法实现,该方法接受一个实现了ITouchEventListener接口的对象。

  2. 事件处理:在ITouchEventListener接口的onTouch方法中,可以捕获并处理触摸事件。这个方法会接收到一个TouchEvent对象,该对象包含了触摸事件的详细信息,如触摸点的位置、事件类型(按下、移动、抬起等)。

  3. 事件分发:如果需要将事件进一步分发到其他组件或逻辑处理单元,可以在onTouch方法内部实现相应的逻辑。这可能涉及到调用其他组件的方法,或者通过某种机制(如事件总线)将事件传递给其他处理单元。

  4. 事件消费:处理完事件后,根据需要返回相应的布尔值来指示事件是否被消费。如果返回true,则事件不会继续传递;如果返回false,则事件可能会继续传递给其他监听器。

请注意,具体的实现细节可能会因鸿蒙系统的版本和具体的组件框架而有所不同。如果上述信息未能解决您的问题,请访问官网客服获取进一步帮助。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部