HarmonyOS 鸿蒙Next:stack布局时从后调整zIndex到前的层按钮无法点击

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:stack布局时从后调整zIndex到前的层按钮无法点击

stack布局的时候,从后面调整zIndex到前面的层,其中的按钮无法点击,不论是设置zIndex或者透明度,都无济于事。

```typescript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) maskZIndex: number = -1;
  [@State](/user/State) maskOpacity: number = 0

  build() {
    Stack() {
      Column({space:20}) {
        Text('Hello Page1')
        Button('按钮1')
          .onClick(() => {
            this.maskZIndex = 99
            this.maskOpacity = 1
            console.log('button1 clicked');
          })
      }
      .width('100%')
      .height('100%')
      .zIndex(0)
      .backgroundColor(Color.Pink)

      Column({space:20}) {
        Text('Hello Page2')
        Button('按钮2')
          .onClick(() => {
            this.maskZIndex = 99
            this.maskOpacity = 0;
            console.log('button2 clicked');
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Green)
      .zIndex(this.maskZIndex)
      .opacity(this.maskOpacity)
      .animation({duration:1000})
    }
    .width('100%')
    .height(500)
  }
}

更多关于HarmonyOS 鸿蒙Next:stack布局时从后调整zIndex到前的层按钮无法点击的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

楼主您好,更新到最新的版本的Deveco进行调试试试。

更多关于HarmonyOS 鸿蒙Next:stack布局时从后调整zIndex到前的层按钮无法点击的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


cke_123.gif

@Entry
@Component
struct Page002 {
  @State maskZIndex: number = -1;
  @State maskOpacity: number = 0

  build() {
    Stack() {
      Column({space:20}) {
        Text('Hello Page1')
        Button('按钮1')
          .onClick(() => {
            this.maskZIndex = 99
            this.maskOpacity = 1
            console.log('button1 clicked');
          })
      }
      .width('100%')
      .height('100%')
      .zIndex(0)
      .backgroundColor(Color.Pink)
      // .hitTestBehavior(HitTestMode.Transparent)

      Column({space:20}) {
        Text('Hello Page2')
        Button('按钮2')
          .onClick(() => {
            this.maskZIndex = -1
            this.maskOpacity = 0;
            console.log('button2 clicked');
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Green)
      .zIndex(this.maskZIndex)
      .opacity(this.maskOpacity)
      .animation({duration:1000})
    }
    .width('100%')
    .height(500)
  }
}

我这边没问题,你那边是不是DevEco Studio 3.1.1 版本 API 9项目的?

建议用最新的 5.0.3.403版本,API 12项目,这个问题应该是之前的旧问题,升一下级就好了。

补充一下,第二个按钮的事件中,正确写法是this.maskZIndex=-1

在HarmonyOS鸿蒙系统中,当使用stack布局时,如果遇到从后调整zIndex到前的层按钮无法点击的问题,这通常是由于层叠顺序(zIndex)或视图遮挡导致的。

  1. 检查zIndex设置: 确保你已经正确设置了需要置于顶层的按钮的zIndex值,且该值大于其他视图层的zIndex。zIndex值越大,视图层越位于上方。

  2. 检查视图遮挡: 确认没有其他视图(如透明视图或其他按钮)遮挡在目标按钮之上。即使设置了正确的zIndex,如果视图间有重叠,也可能导致点击事件被下方视图拦截。

  3. 检查点击事件监听: 确保目标按钮已经正确绑定了点击事件监听器。如果监听器未绑定或绑定错误,按钮将无法响应点击。

  4. 布局参数检查: 检查stack布局及其子视图的布局参数,确保没有设置错误的布局属性导致视图显示异常。

  5. 重新渲染: 在调整zIndex后,尝试触发页面的重新渲染,以确保布局更新生效。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部