今天来聊聊 ArkUI 的 Stack 容器——一个能让你把组件“摞”在一起、层层叠加的小能手。想做徽章叠加、弹窗遮罩，或者卡片投影？Stack 就能轻松搞定！

一、Stack 是什么？

Stack 就像一叠透明塑料片，你可以把文字、图片、按钮一个接一个地放上去，后放的会自然覆盖在前面的上面。它的独门秘籍就是一个参数：

Stack({ alignContent: Alignment.<位置> })

alignContent 决定了这“摞”在一起的组件要靠左上、正中、右下……总共有 9 种对齐姿势。

二、9 种对齐姿势

三、实战演示

下面一行代码就能秀出效果，你不妨把 Alignment.Center 换成其他值，看看组件们如何对齐：

@Entry @Component
struct StackPlayground {
  build() {
    // 只需修改这行：
    Stack({ alignContent: Alignment.Center }) {
      Text('底图')   .width(200).height(180).backgroundColor('#aabbcc')
      Text('中图')   .width(130).height(100).backgroundColor('#bbccaa')
      Text('上图')   .backgroundColor('#ccaabb')
      Text('最上')   .width(60).height(45).backgroundColor('#abcabc')
    }
    .width('100%').height(200).backgroundColor(Color.Pink)
  }
}

• 第一层：200×180，浅灰底。
• 第二层：130×100，稍暗灰。
• 第三层：自适应内容，浅紫。
• 最顶层：60×45，亮绿。

切换 alignContent，看看“最上”文字会跑到哪里吧！

四、应用场景

• 头像徽章：给头像右上角加个在线小圆点。
• 异步提示：底层放“加载中”的菊花，中层是半透明遮罩，顶层是提示文字。
• 自定义弹窗：底图是阴影投影、中图是对话框边框、顶图是真正的内容。

五、小贴士

1. 遮挡问题

   • 叠太高容易把下面的内容盖住，建议通过半透明、内边距、边框等让层次分明。

2. 动画加分

   • 用 ArkUI + Framer Motion，做个“从左上角飞入中间”或“从底部弹出”的酷炫效果。

3. 响应式排版

   • 子组件支持百分比尺寸、layoutWeight，让它在不同屏幕上都能对齐不跑位。

掌握了 Stack，你就打开了层叠布局的大门：简单几行代码，轻松玩转遮罩、徽章、弹窗……让 UI 更具“叠加”魔力。快去试试吧！