HarmonyOS 下层点击事件被上层组件阻挡该如何解决?

如图1,下层有一些带点击事件的按钮,添加了一个上层组件,下层的点击事件就没法点击了。上层组件未设置onClick及onTouch,该怎么解决?

HarmonyOS 下层点击事件被上层组件阻挡该如何解决?-鸿蒙开发者社区

HarmonyOS
2024-10-22 10:28:48
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

代码如下:

import { promptAction } from '@kit.ArkUI';  
@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  
  build() {  
    Row() {  
      Column() {  
        TextArea({ text: "124" })  
          .fontSize(50)  
          .textAlign(TextAlign.End)  
          .align(Alignment.BottomEnd)  
          .groupDefaultFocus(true)  
          .focusable(false)  
          .selectionMenuHidden(true)  
          .width('100%')  
          .height('100%')  
      }.backgroundColor("#ff0000")  
      .height('50%')  
      .width('50%')  
      .hitTestBehavior(HitTestMode.Block)  
      .gesture(LongPressGesture().onAction(async (event: GestureEvent) => {  
        if (event) {  
          promptAction.showToast({  
            message: 'Message Info',  
            duration: 2000  
          });  
        }  
      })  
      )  
    }  
    .width('100%')  
    .alignItems(VerticalAlign.Center)  
    .justifyContent(FlexAlign.Center)  
    .height('100%')  
    .width("100%")  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.

参考链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-gesture-events-multi-level-gesture-V5#hittestbehavior对手势和事件的控制

开发者还需要结合手势绑定,参开链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-gesture-settings-V5

开发者如果您的问题还未解决,根据分析图片中蒙层组件使用了position绝对定位,类似h5中的脱离文档流,不再遵循正常的文档流规则,导致触摸测试失效,建议使用stack布局进行蒙层的覆盖。

如下:

@Component  
struct OverlayNode {  
  build() {  
    Column() {  
      Text('蒙层')  
        .onClick(()=>{  
          console.log('test 1111111')  
        })  
    }  
    .width('100%')  
    .height('100%')  
    .alignItems(HorizontalAlign.Center)  
    .backgroundColor(Color.Gray)  
    .opacity(.4)  
    .hitTestBehavior(HitTestMode.Transparent)  
  }  
}  
  
@Entry  
@Component  
struct OverlayExample {  
  build() {  
    Stack(){  
      Column() {  
        Text('111111222222')  
      }  
      .onClick(()=>{  
        console.log('test chufachuafa')  
      })  
      .justifyContent(FlexAlign.Center)  
      .backgroundColor(Color.Red)  
      .width('100%')  
      .height('100%')  
      OverlayNode()  
    }.width('100%')  
    .border({ color: Color.Black, width: 2 }).padding(20)  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
分享
微博
QQ
微信
回复
2024-10-22 18:15:53
相关问题
Gauge组件问题,如何解决
1225浏览 • 1回复 待解决
HarmonyOS路由问题如何解决
1169浏览 • 1回复 待解决
this传递问题,如何解决
3106浏览 • 1回复 待解决
ohpm publish 组问题,如何解决
1144浏览 • 1回复 待解决
真机联调报错如何解决
1346浏览 • 1回复 待解决
事件分发冲突问题,如何解决
1274浏览 • 1回复 待解决
IDE构建项目失败,如何解决
1567浏览 • 1回复 待解决
Stack组件如何触发下层事件的控件
775浏览 • 1回复 待解决
这个如何解决
6807浏览 • 1回复 待解决
HarmonyOS toast问题如何解决
1966浏览 • 1回复 待解决
HarmonyOS 2300061报错如何解决
1073浏览 • 1回复 待解决
HarmonyOS 组件叠加阻拦点击事件问题
795浏览 • 1回复 待解决