HarmonyOS UI组件自定义点击范围

需要自定义组件点击访问,只有组件某一部分区域点击是才会触发onClick事件。

比如一个按钮,只有左边部分点击才会触发onClick事件,右边部分点击不会触发onClick事件。右边不响应事件的部分区域,如果重叠了其他组件,需要事件需要传递到重叠组件处理。

HarmonyOS
2024-10-10 10:38:19
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考demo:

@Entry  
@Component  
struct TouchTargetExample {  
  @State text: string = ""  
  build() {  
    Column({ space: 20 }) {  
      Button("button1")  
        .width('100%')  
        .height(200)  
        .responseRegion([{ x: 0, y: '50%', width: '100%', height: '50%' }//下面一半矩形热区  
          ,{ x: '50%', y: 0, width: '50%', height: '50%' }]//上面一半的右边半边热区  
        )  
        .onClick(() => {  
          this.text = 'button1 clicked'  
        })  
      Text(this.text).margin({ top: 50 })  
    }.width('100%').margin({ top: 10 })  
    .onClick(()=>{  
      this.text = 'column'  
    })  
  }  
}

设置了按钮下面一半矩形热区,上面一半的右边半边热区。点击这些区域会触发点击事件,上面一半的左边半边会透传到column的点击事件。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-touch-target-V5#示例

使用上述demo可以穿透到重叠部位,不过要重新设置热区,用responseRegion设置矩形热区数组,除去矩形热区数组区域的地方都可以传到下方被覆盖组件。

分享
微博
QQ
微信
回复
2024-10-10 16:44:49
相关问题
Tabs组件自定义导航栏UI问题
798浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
360浏览 • 1回复 待解决
如何在自定义函数中创建一个UI组件
1810浏览 • 1回复 待解决
Ark UI是否如何使用自定义字体
3262浏览 • 1回复 待解决
自定义组件嵌套子组件
9469浏览 • 3回复 待解决
HarmonyOS ArkUI加载自定义组件
415浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
397浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
231浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
299浏览 • 1回复 待解决