HarmonyOS中Stack层叠组件点击穿透事件示例

@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)
      // .touchable(true) // 默认效果，A、B触发相互不影响。
      // .touchable(false) // 不触发B的点击事件，只触发A的点击事件。

      // .hitTestBehavior(HitTestMode.Block) // 默认效果，A、B触发相互不影响。
      // .hitTestBehavior(HitTestMode.None) // 不触发B的点击事件，只触发A的点击事件。
      // .hitTestBehavior(HitTestMode.Default) // 默认效果，A、B触发相互不影响。
      // .hitTestBehavior(HitTestMode.Transparent) //  默认效果，A、B触发相互不影响。

      .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)

      // .touchable(true) // 默认效果，A、B、C触发相互不影响。
      // .touchable(false) // 不触发C的点击事件，点击C\B时只触发B，不影响A的点击事件。

      // .hitTestBehavior(HitTestMode.Block) // 默认效果，A、B、C触发相互不影响。
      // .hitTestBehavior(HitTestMode.None) // 不触发C的点击事件，点击C\B时只触发B，不影响A的点击事件。
      // .hitTestBehavior(HitTestMode.Default) // 默认效果，A、B、C触发相互不影响。
      // .hitTestBehavior(HitTestMode.Transparent) //  默认效果，A、B、C触发相互不影响。

      .onClick(()=>{
        console.log("click C!");
      })

    }
  }
}