HarmonyOS 鸿蒙Next中关于position定位导致按钮点击失效的问题

背景

最近要搞一个统一异常页面，包含轻量级提示、确认弹框以及全屏错误提示

为了实现被父组件引用后，能够全屏弹出错误提示，如下效果：

问题初现

为了实现覆盖父组件内容的效果，于是用到了 position 做绝对定位，从左上角开始

并且还用了 zIndex 增加层级

@ComponentV2
export struct ErrorHandler {
  build() {
    Column() {
      // 只有在错误状态为全屏模式时才显示全屏错误界面
      if (ERROR) {
        // 半透明遮罩层，覆盖整个屏幕
        Column() {
          // 居中显示SVG图片（省略）

          // 显示错误消息（省略）

          // 返回按钮
          Button($r('app.string.button_cancel'))
            .width($r("app.float.button_size_l"))
            .fontSize($r('app.float.font_size_text_m'))
            .borderRadius($r("app.float.button_radius_size_l"))
            .margin({ left: '5vp' })
            .onClick(() => {
              ErrorService.hideError();
              this.onCancel();
            })
        }
        .width('100%')
        .height('100%')
        .position({ x: 0, y: 0 })
        .zIndex(9999)
      }
    }
  }
}

效果确实实现了，但是发现返回按钮点不了，没反应

问题解决

后面问了AI，有一句话引起了注意：

问：column的position({ x: 0, y: 0 })，有什么作用？

答：

……省略

与其他属性冲突：

position与margin、align等布局属性同时设置时，可能产生预期外的偏移，需通过调试确定最终效果

因为在模拟机上运行时，通过 ArkUI Inspector 观察组件，发现确实有偏移

所以，有可能是因为按钮组件偏移了，导致点击位置不对，没有触发

于是，又看了一下代码，发现当时 AI 生成的代码中，有两个 column，内层的 column 条件编译，只有全屏异常时才显示。而 position 就是在内层的 column 上

既然 position 只是为了阻挡父组件，那么设置在外层 column 也是可以的

改了之后，发现按钮可以点击了

结论

不知道具体原因，问题能解决，只能说是合理猜测+推理+实践

有不对的地方，欢迎大佬指正~