ontouch 事件传递 给if条件渲染的另外组件 - HarmonyOS 鸿蒙Next

ontouch 事件传递 给if条件渲染的另外组件 - HarmonyOS 鸿蒙Next 在mouse中的上部区域Blank组件监听touch事件，触摸会触发条件渲染显示VirtualRoller组件，我在VirtualRoller组件内部有touch事件的监听，如何把touch事件传递过去，现在我的代码触摸显示VirtualRoller组件后监听不到了

export default struct Mouse {
  private TAG: string = 'Mouse';
  @State MouseMode: boolean = false;
  @State currentImage: Resource = $r('app.media.ic_kvm_full_screen_operation_1');
  @Link isShowMouse: boolean

  onClockwise() {
    console.log(this.TAG, 'Setting onClockwise');
  }

  onCounterClockwise() {
    console.log(this.TAG, 'Setting onCounterClockwise');
  }

  build() {
    Stack() {
      if (this.MouseMode) {
        VirtualRoller({
          onClockwise: this.onClockwise,
          onCounterClockwise: this.onCounterClockwise,
        })
          .id('VirtualRoller')
          .width(150)
          .height(150)
          .onTouch((event) => {
            console.log(this.TAG, ' VirtualRoller onTouch event:', event);
          })
      } else {
        Column() {
          Row() {
            Image($r('app.media.ic_kvm_full_screen_mouse_pointer'))
              .id('mousePointer')
              .height('100%')
              .objectFit(ImageFit.Contain)
            Blank()
              .layoutWeight(1)
            Image($r('app.media.ic_kvm_full_screen_mouse_exit'))
              .height('100%')
              .objectFit(ImageFit.Contain)
              .onClick(() => {
                this.isShowMouse = false
              })
          }
          .height('20%')

          Stack() {
            // 底图
            Image(this.currentImage)
              .objectFit(ImageFit.Contain)
            // 点击区域容器
            Column() {
              // 上部区域
              Blank()
                .height('20%')
                .width('40%')
                .backgroundColor(Color.Transparent)
                .onTouch((event) => {
                  if (event.type === TouchType.Down) {
                    this.MouseMode = true
                  }
                  if (event.type === TouchType.Up) {
                    this.MouseMode = false
                  }
                })
          }
        }
        .width('100%')
        .height('100%')
  }
}

更多关于ontouch 事件传递 给if条件渲染的另外组件 - HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

图片 实现类似向日葵模拟鼠标变成滚轮的效果

更多关于ontouch 事件传递 给if条件渲染的另外组件 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙Next）中，onTouch事件的传递可以通过组件的touchable属性来控制。对于if条件渲染的组件，如果需要在条件满足时将onTouch事件传递给另一个组件，可以通过以下方式实现：

  1. 事件绑定：在父组件中定义onTouch事件处理函数，并将其绑定到需要响应触摸事件的子组件上。例如：

    onTouch(event) {
    // 处理触摸事件
}

  2. 条件渲染：使用if条件语句控制子组件的渲染。当条件满足时，渲染目标组件，并将onTouch事件绑定到该组件。例如：

    if (condition) {
    return <Component onTouch={this.onTouch} />;
}

  3. 事件传递：如果需要在多个组件之间传递onTouch事件，可以通过事件冒泡机制实现。父组件捕获事件后，根据需要将事件传递给其他子组件。例如：

    onTouch(event) {
    if (condition) {
        // 将事件传递给另一个组件
        anotherComponent.handleTouch(event);
    }
}

通过上述方式，可以在鸿蒙Next中实现onTouch事件在条件渲染组件之间的传递。

回到顶部