层叠布局容器（Stack）详解

在 ArkUI 中，Stack 容器支持将多个子组件按照指定的对齐方式“叠放”在一起，后添加的组件覆盖在前面的组件之上。它非常适合实现卡片翻转、徽章叠加、遮罩层等场景。

一、Stack 的基本用法

interface StackInterface {
  (options?: { alignContent?: Alignment }): StackAttribute;
}

• options.alignContent：控制子组件在 Stack 容器里的对齐方式，取值来自 Alignment 枚举。

declare class StackAttribute extends CommonMethod<StackAttribute> {
  alignContent(value: Alignment): StackAttribute;
}

二、Alignment 枚举

Alignment 定义了 9 种对子组件的定位方式：

三、示例代码

下面以一个固定大小的 Stack 演示九种对齐方式。四个 Text 组件依次叠放，最后的 Text('Text4') 完全覆盖最前面一层。

@Entry @Component
struct StackDemo {
  build() {
    // 改变这里的 alignContent 查看不同对齐效果：
    const alignMode = Alignment.Center;

    Stack({ alignContent: alignMode }) {
      Text('Text1')
        .width(200).height(180)
        .backgroundColor('#aabbcc').textAlign(TextAlign.Center);

      Text('Text2')
        .width(130).height(100)
        .backgroundColor('#bbccaa').textAlign(TextAlign.Center);

      Text('Text3')  // 不指定尺寸，内容包裹
        .backgroundColor('#ccaabb').textAlign(TextAlign.Center);

      Text('Text4')
        .width(60).height(45)
        .backgroundColor('#abcabc').textAlign(TextAlign.Center);
    }
    .width('100%')
    .height(200)
    .backgroundColor(Color.Pink)
    .borderRadius(8)
    .padding(10);
  }
}

将 alignMode 分别设为 Alignment.TopStart、Alignment.Top、……、Alignment.BottomEnd，即可快速切换对齐位置。

四、使用建议与注意点

1. 覆盖风险

   • 由于后加入的子组件会覆盖在前一层之上，尺寸较小或透明度不够时可能完全遮住下面的内容。可通过 opacity、border、padding 等样式微调显示层次。

2. 场景示例

   • 徽章叠加：在头像右上角叠加“在线”小圆点。
   • 卡片阴影：底层放置阴影投影，顶层放置卡片主体。
   • 浮动按钮：在容器底部右侧对齐一个“+”号按钮。

3. 配合动画

   • 与 Framer Motion 联动，可在不同对齐位置之间做平移动画，轻松实现元素弹出/折叠效果。

4. 响应式布局

   • Stack 内部子组件可使用百分比尺寸或 layoutWeight，在不同屏幕尺寸下依然保持对齐效果。

五、小结

• Stack 简单易用，只需一个 alignContent 即可定位所有子元素。
• 避免过度叠加，以免出现遮挡不明确的情况。
• 与其他布局容器（如 Flex、Row/Column）结合使用，可构建复杂而灵活的界面。

掌握了 Stack，你就拥有了“层叠”与“覆盖”这项强大的布局能力，可在 ArkUI 中轻松实现各种视觉叠加效果。