HarmonyOS鸿蒙Next中如何让被带透明度的容器遮住还能接受事件

HarmonyOS鸿蒙Next中如何让被带透明度的容器遮住还能接受事件 项目中存在控制面板（带透明度），会遮住 UI ，但被遮住的 UI 需要接收到点击和触摸事件，请问需要如何处理？我将代码简化写成以下代码，Button 如何能被点击到？

import { promptAction } from '@kit.ArkUI'

@Component
struct GestureDemo {
  build() {
    RelativeContainer() {
      RelativeContainer() {
        Button('点击')
          .onClick(() => {
            promptAction.showToast({
              message: '点击到了！！',
              duration: 2000
            })
          })
          .alignRules({
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
          })
          .margin({ bottom: 20 })
      }
      .width('100%')
      .height('80%')
      .backgroundColor('#55FFFF00')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center }
      })

      RelativeContainer() {
        Text()
      }
      .width('100%')
      .height('40%')
      .backgroundColor('#AA000000')
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
      })
      .focusable(false)

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }
}

更多关于HarmonyOS鸿蒙Next中如何让被带透明度的容器遮住还能接受事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

参考下述demo：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {

    RelativeContainer() {

      RelativeContainer() {

        Button('点击')

          .onClick(() => {

            promptAction.showToast({

              message: '点击到了！！',

              duration: 2000

            })

          })

          .alignRules({

            bottom: { anchor: '__container__', align: VerticalAlign.Bottom }

          })

          .margin({ bottom: 20 })

      }

      .width('100%')

      .height('80%')

      .backgroundColor('#55FFFF00')

      .alignRules({

        center: { anchor: '__container__', align: VerticalAlign.Center }

      })

      RelativeContainer() {

        Text()

      }
      .width('100%')

      .height('40%')

      .backgroundColor('#AA000000')

      .alignRules({

        left: { anchor: '__container__', align: HorizontalAlign.Start },

        bottom: { anchor: '__container__', align: VerticalAlign.Bottom }

      })

      .focusable(false)

      .opacity(0)

      .hitTestBehavior(HitTestMode.None)

    }

    .width('100%')

    .height('100%')

    .backgroundColor(Color.White)

  }
}

opacity设置为0 透明度为0，可以自行调节透明度

hitTestBehavior(HitTestMode.None)，这个属性的效果就是 自身不响应 但是子节点和兄弟节点都还会响应

更多关于HarmonyOS鸿蒙Next中如何让被带透明度的容器遮住还能接受事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若要让一个带有透明度的容器遮住其他元素并仍能接收事件，可以使用Component的hitTestBehavior属性。将hitTestBehavior设置为HitTestMode.Transparent或HitTestMode.Always，可以使透明区域继续响应触摸事件。

示例代码如下：

@Entry
@Component
struct TransparentContainer {
  build() {
    Column() {
      Text('背景内容')
        .fontSize(30)
        .backgroundColor(Color.Yellow)
        .width('100%')
        .height('100%')

      Stack() {
        Text('透明容器')
          .fontSize(20)
          .backgroundColor(Color.Red)
          .opacity(0.5) // 设置透明度
          .width('80%')
          .height('80%')
          .hitTestBehavior(HitTestMode.Transparent) // 设置事件穿透
      }
    }
    .width('100%')
    .height('100%')
  }
}

在此示例中，透明容器即使设置了透明度，仍能接收触摸事件。HitTestMode.Transparent允许透明区域穿透事件，而HitTestMode.Always则强制容器始终接收事件。

在HarmonyOS鸿蒙Next中，要让带透明度的容器既能遮住下方内容又能接受事件，可以使用Stack布局，并将透明容器放置在需要遮住的组件上方。通过设置容器的opacity属性实现透明度，同时确保hitTestBehavior属性为HitTestBehavior.opaque，这样透明区域也能接收用户交互事件。示例代码如下：

Stack() {
  // 下方内容
  Text('被遮住的内容')
  
  // 透明遮罩层
  Container()
    .opacity(0.5)
    .backgroundColor('#000000')
    .hitTestBehavior(HitTestBehavior.opaque)
    .onClick(() => {
      console.log('遮罩层被点击');
    })
}

这样，透明容器既能遮住下方内容，又能响应点击事件。

回到顶部