ArkUI Stack：叠层不是随便盖上去

今天我们用 Stack 做几个常见叠层效果：角标、头像组、浮层卡片。

这篇不讲弹窗，也不讲动画。Stack 的重点是同一块区域里的前后层级，先把这个边界抓住就够了。

角标覆盖

角标这类东西很适合放在 Stack 里：

Stack({ alignContent: Alignment.TopEnd }) {
  Column() {
    Text('设计稿')
  }

  Text('NEW')
    .margin({ top: 12, right: 12 })
}

alignContent 先决定默认对齐点。这里用 TopEnd，角标自然就贴近右上角。

用 zIndex 控制层级

头像叠放时，谁压在上面要说清楚：

Text('李')
  .zIndex(3)

zIndex 越大越靠前。这个比用一堆容器硬凑层级更直接。

浮层也要先稳住底层

浮层卡片不是随便一盖。先给底层稳定宽高，再把摘要区域放到上面，布局才不会跟着内容乱跳。

你平时在哪些地方用过叠层？角标、遮罩、头像组，还是卡片摘要？可以挑一个场景，把这个 Demo 的颜色和位置改成自己的。

完整代码

@Entry
@Component
struct ArkUIStackDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  avatar(text: string, color: string, left: number, right: number, layer: number) {
    Text(text)
      .width(48)
      .height(48)
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#FFFFFF')
      .textAlign(TextAlign.Center)
      .backgroundColor(color)
      .border({ width: 2, color: '#FFFFFF' })
      .borderRadius(24)
      .margin({ left: left, right: right })
      .zIndex(layer)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Stack')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('叠层不是随便盖上去')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('Stack 用来处理“同一块区域里有前后层级”的 UI。这里只看对齐、覆盖和层级，不顺手写弹窗、半模态或动画。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('角标覆盖是 Stack 的常见用法', '图片、卡片、按钮旁边的小角标，都适合放在同一个 Stack 里。alignContent 先决定默认对齐点。')

          Stack({ alignContent: Alignment.TopEnd }) {
            Column({ space: 8 }) {
              Text('设计稿')
                .fontSize(18)
                .fontWeight(700)
                .fontColor('#FFFFFF')

              Text('刚同步')
                .fontSize(13)
                .fontColor('#DBEAFE')
            }
            .width('100%')
            .height(146)
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .backgroundColor('#2563EB')
            .borderRadius(8)

            Text('NEW')
              .width(54)
              .height(28)
              .fontSize(12)
              .fontWeight(700)
              .fontColor('#9A3412')
              .textAlign(TextAlign.Center)
              .backgroundColor('#FED7AA')
              .borderRadius(14)
              .margin({ top: 12, right: 12 })
          }
          .width('100%')
          .height(146)
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('zIndex 决定谁压在上面', '多个组件重叠时，zIndex 越大越靠前。头像组这种场景，不用写很多 Row 偏移。')

          Stack({ alignContent: Alignment.Center }) {
            this.avatar('王', '#2563EB', 0, 96, 1)
            this.avatar('陈', '#0F766E', 0, 48, 2)
            this.avatar('李', '#7C3AED', 0, 0, 3)
            this.avatar('+5', '#C2410C', 48, 0, 4)
          }
          .width('100%')
          .height(96)
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#CCFBF1' })
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('浮层卡片先把底层留稳', 'Stack 不只会叠头像，也能做卡片里的浮动摘要。关键是先让底层尺寸稳定，再放上层内容。')

          Stack({ alignContent: Alignment.BottomStart }) {
            Column()
              .width('100%')
              .height(156)
              .backgroundColor('#F5F3FF')
              .borderRadius(8)

            Column({ space: 6 }) {
              Text('本周阅读')
                .fontSize(15)
                .fontWeight(700)
                .fontColor('#0F172A')

              Text('12 篇文章，3 个 Demo 待复盘')
                .fontSize(12)
                .fontColor('#64748B')
            }
            .width('78%')
            .padding(14)
            .backgroundColor('#FFFFFF')
            .border({ width: 1, color: '#DDD6FE' })
            .borderRadius(8)
            .margin({ left: 14, bottom: 14 })
          }
          .width('100%')
          .height(156)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}