在鸿蒙(HarmonyOS)应用开发中，Stack 布局模式是一种非常灵活的布局方式，类似于其他开发框架中的 StackPanel 或 AbsoluteLayout。它允许子组件按照层级关系进行堆叠，后添加的组件会覆盖在先添加的组件之上。开发者可以通过设置组件的位置、大小或对齐方式，实现复杂的界面效果。

1. Stack 布局的特点

• 组件堆叠：子组件按照添加顺序堆叠，后添加的组件显示在前面。

• 自由定位：子组件的位置可以通过绝对坐标或对齐方式(如居中、靠边等)自由设置。

• 层级控制：通过设置 zIndex 属性，可以控制组件的显示层级。

适用场景：

实现悬浮按钮、弹窗、遮罩层等效果。

创建自定义的复杂布局。

动态调整组件的位置和层级。

2. Stack 布局的使用方法

(1)XML 布局文件

在鸿蒙的 XML 布局文件中，可以使用 标签来定义 Stack 布局。

示例代码：

<Stack>
    <!-- 背景组件 -->
    <Text
        id="backgroundText"
        width="match_parent"
        height="match_parent"
        text="背景层"
        backgroundColor="#FFCCCCCC" />

    <!-- 前景组件 -->
    <Text
        id="foregroundText"
        width="200vp"
        height="100vp"
        text="前景层"
        backgroundColor="#FF0000FF"
        alignSelf="center" /> <!-- 居中显示 -->
</Stack>

(2)eTS(TypeScript)代码

在鸿蒙的 eTS 开发中，可以通过 Stack 组件来实现类似的功能。

示例代码：

@Entry
@Component
struct StackExample {
  build() {
    Stack() {
      // 背景组件
      Text('背景层')
        .width('100%')
        .height('100%')
        .backgroundColor('#CCCCCC')

      // 前景组件
      Text('前景层')
        .width(200)
        .height(100)
        .backgroundColor('#0000FF')
        .alignSelf(ItemAlign.Center) // 居中显示
    }
  }
}

3. Stack 布局的属性

(1)Stack 容器属性

无特殊属性：Stack 本身没有额外的布局属性，主要通过子组件的属性来控制布局。

(2)子组件属性

alignSelf：设置子组件在 Stack 布局中的对齐方式。

可选值：ItemAlign.Start、ItemAlign.Center、ItemAlign.End、ItemAlign.Stretch。

zIndex(部分场景支持)：控制子组件的显示层级，值越大，层级越高。

width 和 height：设置子组件的宽高。

backgroundColor：设置子组件的背景颜色。

4. Stack 布局的常见应用场景

• 弹窗设计：

使用 Stack 布局实现弹窗效果，背景层为半透明遮罩，前景层为弹窗内容。

• 悬浮按钮：

在页面右下角添加一个悬浮按钮，通过 Stack 布局实现。

• 自定义布局：

创建复杂的自定义布局，如多层菜单、导航栏等。

示例：实现一个简单的弹窗效果

效果描述：

• 背景层：全屏灰色半透明遮罩。

• 弹窗层：白色背景的弹窗，位于屏幕中央。

代码实现：

@Entry
@Component
struct PopupExample {
  build() {
    Stack() {
      // 背景层
      Text('背景遮罩')
        .width('100%')
        .height('100%')
        .backgroundColor('#800000000')

      // 弹窗层
      Text('弹窗内容')
        .width('200vp')
        .height('100vp')
        .backgroundColor('#FFFFFF')
        .alignSelf(ItemAlign.Center)
    }
  }
}

ps:
优势：Stack 布局模式灵活性强，适合实现复杂的堆叠效果，如弹窗、遮罩等。

注意事项：确保子组件的 zIndex 设置合理，避免层级混乱。

推荐场景：适用于需要组件堆叠显示的场景，如弹窗、提示框等。

通过合理使用 Stack 布局，可以大幅提升开发效率和用户体验。