部分用户头像无法点击进入主页
==============

#### 问题现象

应用内点击无头像框的用户头像可以进入主页，但是点击有头像框的用户头像无法进入主页。

#### 背景知识

*   [层叠布局 (Stack)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-stack-layout)：用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
*   [overlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-overlay#overlay)：在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。浮层的定位同样基于当前组件进行计算。浮层不通过组件树进行渲染，部分接口（例如getRectangleById）不支持获取浮层中的组件。
*   [hitTestBehavior](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-hit-test-behavior#hittestbehavior)：设置组件的触摸测试类型。如果组件不设置hitTestBehavior，其默认触摸测试类型为HitTestMode.Default。
*   [HitTestMode.Transparent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#hittestmode9)：自身和子节点都响应触摸测试，不会阻塞兄弟节点的触摸测试，不会影响祖先节点的触摸测试。

#### 问题定位

1.  使用DevEco Testing查看无头像框的用户头像组件树，如下图所示，Stack容器中只有一个头像组件，并且clickable属性为true，所以可以点击并进入主页。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/91/v3/jPAz-GrERyS7HAsA34TUVg/zh-cn_image_0000002658910841.png?HW-CC-KV=V1&HW-CC-Date=20260709T133904Z&HW-CC-Expire=86400&HW-CC-Sign=24F5B9845DACD45F970A3E0AFA6530F6654C5E68152CE824E4D2F53903C9E9B7 "点击放大")
    
2.  查看有头像框的用户头像组件树，如下面两张图所示，可以看到Stack容器中从上到下的顺序是：头像组件（clickable属性为true），头像框组件（clickable属性为false）。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d3/v3/IbpWMol0RHOYt1HlIljsQQ/zh-cn_image_0000002658790889.png?HW-CC-KV=V1&HW-CC-Date=20260709T133904Z&HW-CC-Expire=86400&HW-CC-Sign=AE71D86C9E1BC07AE705C8A6BC1CF4D3D525FF19E2BE519D954FA301ADBA13C7 "点击放大")
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ff/v3/1P8kADHaRMa-w-utmLquug/zh-cn_image_0000002628551524.png?HW-CC-KV=V1&HW-CC-Date=20260709T133904Z&HW-CC-Expire=86400&HW-CC-Sign=2C93EB5881C3459F59B67695A5A291F5BDB1A4DCE9460B71A0AC0CBFDAD90FAF "点击放大")
    

#### 分析结论

含有头像框的用户头像，使用了Stack层叠布局，Stack中头像框组件的顺序在头像组件之后，所以头像框组件覆盖了头像组件。而且头像框组件没有设置点击事件，导致无法进入主页。

#### 修改建议

*   可以在最外层的Stack组件设置点击事件进行跳转。
*   可以使用overlay将头像框组件设置头像组件的浮层，这样只需要设置头像组件的点击事件。

示例代码如下：

import { promptAction } from "@kit.ArkUI";

@Entry
@Component
struct Index {
  @Builder
  OverlayNode() {
    Image($r('app.media.foreground')) _// 表示头像框图片_
      .height(100)
      .width(100)
      .hitTestBehavior(HitTestMode.Transparent); _// 配置浮层不阻塞交互_
  }

  showToast(str: string) {
    this.getUIContext().getPromptAction().showToast({
      message: str,
      duration: 2000,
      showMode: promptAction.ToastShowMode.DEFAULT,
      bottom: 80
    });
  }

  build() {
    Column() {
      Text('使用Stack方式：');
      Stack() {
        Image($r('app.media.background')) _// 表示头像图片_
          .height(100)
          .width(100);
        Image($r('app.media.foreground')) _// 表示头像框图片_
          .height(100)
          .width(100);
      }
      .onClick(() => {
        this.showToast('使用Stack方式，点击头像进入下一页');
      })
      .margin(30);

      Text('使用overlay方式：');
      Image($r('app.media.background')) _// 表示头像图片_
        .height(100)
        .width(100)
        .overlay(this.OverlayNode(), { align: Alignment.Center })
        .onClick(() => {
          this.showToast('使用overlay方式，点击头像进入下一页');
        })
        .margin(30);
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%');
  }
}