HarmonyOS鸿蒙Next中Stack层叠View点击穿透

HarmonyOS鸿蒙Next中Stack层叠View点击穿透

@Entry
@Component
struct Index {

  build() {
    Stack(){
      Column(){
        // A组件
        Text('A').fontWeight(FontWeight.Bolder)
      }
      .width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Start)
      .onClick(()=>{
        console.log("click A!");
      })

      Column(){
        // B组件,当父布局是stack，同一区域中B会遮挡A的点击事件。
        Text('B').fontWeight(FontWeight.Bolder)
      }
      .width("70%")
      .height("70%")
      .justifyContent(FlexAlign.Start)
      .backgroundColor(Color.Pink)
      .onClick(()=>{
        console.log("click B!");
      })

      Column(){
        // C组件,当父布局是stack，同一区域中C会遮挡B、A的点击事件。
        Text('C').fontWeight(FontWeight.Bolder)
      }
      .width("40%")
      .height("40%")
      .justifyContent(FlexAlign.Start)
      .backgroundColor(Color.Orange)
      .onClick(()=>{
        console.log("click C!");
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Stack层叠View点击穿透的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Stack层叠View点击穿透的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Stack布局允许子组件层叠显示。如果希望实现点击穿透效果，即点击上层组件时，事件能传递到下层组件，可以通过以下方式实现：

  1. 设置touchable属性：将上层组件的touchable属性设置为false，这样点击事件会穿透到下层组件。

  2. 使用hitTestBehavior：通过设置hitTestBehavior属性为HitTestMode.Transparent，使上层组件在点击测试时透明，事件可以传递到下层。

示例代码：

Stack() {
  // 下层组件
  Text('下层组件')
    .onClick(() => {
      console.log('下层组件被点击');
    })

  // 上层组件
  Text('上层组件')
    .touchable(false) // 设置点击穿透
    .hitTestBehavior(HitTestMode.Transparent) // 设置点击测试透明
    .onClick(() => {
      console.log('上层组件被点击');
    })
}
回到顶部