HarmonyOS Marquee组件引起点击事件冲突

marquee组件与image同在约束布局中，image居左，marquee居中，当marquee不满一行未运行跑马灯效果时，image点击事件正常响应，当marquee超过一行开始运行跑马灯效果时，image点击事件不会触发

HarmonyOS

superinsect

2024-12-26 15:37:23

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

可以在Marquee组件下添加 .hitTestBehavior(HitTestMode.Transparent)让手势透传下去，点击事件就可以正常触发了参考链接：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md

参考demo：

import promptAction from '@ohos.promptAction'
import measure from '@ohos.measure'
import componentUtils from '@ohos.arkui.componentUtils'
@Entry
@Component
struct MarqueeExample {
  @State @Watch('textChange') private webTitle: string ="asdhaidiuassakurasakurasakurasakurasakurasak" //'sakurasakurasakurasakurasakurasakurasakurasakurasakurasakura'
  @State private overflow: boolean = true
  textChange() {
    let width = measure.measureText({
      textContent: this.webTitle,
      fontSize: 20 // 单位fp
    }) // 返回值单位px

    let rect = componentUtils.getRectangleById('title')
    this.overflow = width > rect.size.width
  }

  build() {
    Column() {
      Row({ space: 40 }) {

        Image($r('app.media.app_icon'))
          .width(50)
          .height(50)
          .onClick(() => {
            console.log(TAG, 'click me')
            promptAction.showToast({
              message: 'click me',
              duration: 2000
            })

          })

        Marquee({src:this.webTitle, start:true})
          .fontSize(20)
          .fontColor(Color.Black)
          .id('title')
          .align(Alignment.Center)
          .hitTestBehavior(HitTestMode.Transparent)

      }


    }
    .backgroundColor(Color.Green)
  }
}