# 如何解决应用侧浮层被Web遮挡及触摸事件穿透问题

#### 问题现象

在HarmonyOS应用开发中，使用Web组件与应用侧组件构建混合页面时，可能会遇到应用侧浮层被Web组件遮挡以及触摸事件穿透的问题。具体表现为：在Web组件上方叠加应用侧浮层（如导航栏）并设置zIndex属性后，浮层仍被Web组件内容覆盖，zIndex设置无效；此外，点击应用侧浮层上的按钮时，触摸事件穿透至下方的Web组件，触发了网页中的链接跳转。

#### 背景知识

在HarmonyOS中，zIndex属性用于设置同一容器中兄弟组件的堆叠顺序，值越大显示层级越高。如果Web组件与应用侧浮层不在同一个父容器中，zIndex可能无法正确控制层级。ArkWeb提供了同层渲染能力，允许将应用侧组件直接渲染到Web组件层级内部，从而精确控制显示层级。更多参考请参见同层渲染、Z序控制。

#### 解决方案

针对应用侧浮层被Web组件遮挡及触摸事件穿透的问题，可通过以下方式解决：

1.  解决应用侧浮层被Web组件遮挡且zIndex设置无效的问题：
    
    将Web组件和应用侧浮层统一放入同一个Stack容器中，使其成为兄弟组件，这样zIndex才能正确控制层级。zIndex用于设置同一容器中兄弟组件的堆叠顺序，值越大显示层级越高。
    
    如果需要在Web页面内部嵌入应用侧组件（如导航栏、输入框等），可以使用ArkWeb的同层渲染能力，使应用侧组件直接渲染到Web组件层级内部，可控制同层标签的显示层级，使其高于其他Web元素。
    
    以下示例展示了如何使用Stack容器包裹Web组件与应用侧浮层组件，并通过zIndex控制层级：
    
    ```
    import { webview } from '@kit.ArkWeb';
    @Entry
    @Component
    struct Index {
      controller: webview.WebviewController = new webview.WebviewController();
    
      build() {
        Stack() {
          // Web组件作为底层
          Web({ src: '', controller: this.controller })
            .width('100%')
            .height('100%')
    
          // 应用侧浮层，通过zIndex设置较高的显示层级
          Column() {
            Text('导航栏')
              .fontSize(20)
              .fontColor(Color.White)
            Button('点击按钮')
              .onClick(() => {
                console.info('浮层按钮被点击');
              })
          }
          .width('100%')
          .height(60)
          .backgroundColor('#FF0000')
          .zIndex(100)
            // 设置HitTestMode.Block阻塞触摸事件向后续节点传递，防止事件穿透到Web组件
          .hitTestBehavior(HitTestMode.Block)
        }
        .width('100%')
        .height('100%')
      }
    }
    ```
    
2.  解决触摸事件穿透到下方Web组件的问题：
    
    如果应用侧浮层和Web组件在同一个Stack中，且应用侧浮层设置了较高的zIndex，触摸事件默认由上层组件接收，不应穿透。如果仍有穿透现象，请为应用侧浮层设置hitTestBehavior(HitTestMode.Block)，Block模式可以阻塞触摸事件向后续节点传递，从而有效阻止事件穿透至下方的Web组件。关键代码如下：
    
    ```
    // 为应用侧浮层设置HitTestMode.Block，阻塞事件向后续节点传递
    .hitTestBehavior(HitTestMode.Block)
    ```
    

更多参考请参见如何让一个组件显示在另一个组件上面。