HarmonyOS鸿蒙Next中stack布局如何实现上层不响应事件，下层响应事件

HarmonyOS鸿蒙Next中stack布局如何实现上层不响应事件，下层响应事件 stack布局，如何实现上层不响应事件，下层响应事件
按照Android的事件分发机制，上层如果不拦截事件，则会向下层进行事件分发

3 回复

请使用以下解决方案

build() {

  Stack() {

    Column() {

    }.width('100%')
    .height('100%')
    .backgroundColor(Color.Red)
    .onClick(() => {
      console.info('DemoTest', 'Column onClick')
    })

    Column()
      .width('50%')
      .height('50%')
      .backgroundColor(Color.Blue)
      .hitTestBehavior(HitTestMode.Transparent)
      .onClick(() => {
        console.info('DemoTest', 'Text onClick')
      })
  }
}

更多关于HarmonyOS鸿蒙Next中stack布局如何实现上层不响应事件，下层响应事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Stack布局结合事件处理机制来实现上层不响应事件、下层响应事件的效果。具体步骤如下：

  1. 使用Stack布局：将需要处理的组件按层级放入Stack中，上层组件覆盖下层组件。

  2. 设置touchable属性：为上层组件设置touchable属性为false，使其不响应触摸事件。例如：

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

  // 上层组件
  Button('上层按钮')
    .touchable(false) // 设置不响应事件
    .onClick(() => {
      console.log('上层按钮被点击');
    });
}

  3. 事件穿透：由于上层组件不响应事件，事件会穿透到下层组件，下层组件可以正常响应事件。

通过这种方式，可以实现上层组件不响应事件，而下层组件正常响应事件的效果。

在HarmonyOS鸿蒙Next中，可以通过Stack布局结合HitTestMode属性实现上层不响应事件，下层响应事件。具体步骤如下：

  1. 使用Stack布局，将下层组件和上层组件依次放入Stack中。
  2. 为上层组件设置HitTestMode属性为HitTestMode.Transparent，使其不接收触摸事件。
  3. 这样，触摸事件将穿透上层组件，由下层组件响应。

示例代码：

Stack({ alignContent: Alignment.Center }) {
    // 下层组件
    Text("下层组件")
        .onClick(() => {
            console.log("下层组件被点击");
        })

    // 上层组件
    Text("上层组件")
        .hitTestBehavior(HitTestMode.Transparent)
        .onClick(() => {
            console.log("上层组件被点击"); // 不会执行
        })
}
回到顶部