鸿蒙原生ArkTS布局方式之Stack顶层叠布局

一、引言

在鸿蒙原生应用开发中，布局（Layout）是构建用户界面的基石。ArkTS 作为 HarmonyOS NEXT 的主力声明式 UI 开发语言，提供了丰富而灵活的布局容器，帮助开发者高效地组织界面元素。在众多布局容器中，Stack（层叠布局）以其独特的「子组件堆叠」特性，成为实现复杂 UI 效果时不可或缺的工具。

本文将以 Stack + alignContent(Alignment.Top) — 子组件层叠，顶部居中对齐 这一具体场景为切入点，由浅入深地剖析 Stack 布局的核心概念、属性体系、实战用法以及常见陷阱。无论你是刚接触鸿蒙开发的新手，还是希望系统性理解 Stack 布局的进阶开发者，都能从本文中获得扎实的知识与可复用的经验。

二、Stack 布局概述

2.1 什么是 Stack 布局
Stack，直译为「堆栈」，在 ArkTS 中是一种允许子组件在 Z 轴方向（深度方向） 上层层堆叠的布局容器。与 Row（水平布局）和 Column（垂直布局）在单一方向上排列子组件不同，Stack 的所有子组件都从同一个原点开始渲染，后添加的子组件会覆盖在先添加的子组件之上，形成类似「卡片叠放」或「图层叠加」的视觉效果。

Stack 在以下场景中尤为常用：

图片与文字的叠加：在图片上方显示标题、标签或遮罩层。
浮动按钮 / 悬浮控件：在页面主体之上放置操作按钮（如 FAB）。
装饰性元素：在背景上叠加渐变、形状或动画图层。
卡片堆叠：实现类似轮播图或卡片切换的效果。
自定义弹窗 / 提示层：在内容层之上显示模态或非模态提示。
2.2 Stack 与 Row / Column 的对比
为了更清晰地理解 Stack 的定位，我们先将其与另外两种基础布局容器做一个横向对比。

特性 Row（水平布局） Column（垂直布局） Stack（层叠布局）
主轴方向 水平（从左到右） 垂直（从上到下） Z 轴（从里到外）
子组件排列 依次水平排列 依次垂直排列 重叠堆叠
子组件间影响 排布影响位置 排布影响位置 后添加覆盖先添加
对齐控制 justifyContent + alignItems justifyContent + alignItems alignContent
适用场景 导航栏、按钮组 表单、列表项 图片标注、悬浮层
从表中可以看到，Stack 的最大特点在于「重叠」—— 子组件不再彼此避让，而是在同一个平面空间内叠加，这就使得它对齐方式的设计与 Row/Column 有本质区别。

三、alignContent 属性深度解析

3.1 alignContent 的作用
在 Stack 布局中，alignContent 是 控制所有子组件在容器内整体对齐方式 的核心属性。它接受一个 Alignment 枚举值，决定了所有子组件作为一个「整体」在 Stack 容器中的位置。

重要概念：alignContent 控制的是「所有子组件的整体对齐」，而不是单个子组件的位置。如果需要为某个子组件单独指定对齐方式，应使用该子组件的 .align() 方法，它会覆盖 alignContent 对该子组件的控制。

3.2 Alignment 枚举全览
Alignment 枚举提供了 9 种标准对齐值，涵盖水平方向（左、中、右）与垂直方向（上、中、下）的 3×3 组合：

枚举值 水平对齐 垂直对齐 示意图描述
Alignment.Top 居中 顶部 子组件整体贴顶，左右居中
Alignment.TopStart 左对齐 顶部 子组件整体在左上角
Alignment.TopEnd 右对齐 顶部 子组件整体在右上角
Alignment.Center 居中 居中 子组件整体在正中央
Alignment.Start 左对齐 居中 子组件整体在左侧居中
Alignment.End 右对齐 居中 子组件整体在右侧居中
Alignment.Bottom 居中 底部 子组件整体贴底，左右居中
Alignment.BottomStart 左对齐 底部 子组件整体在左下角
Alignment.BottomEnd 右对齐 底部 子组件整体在右下角
3.3 本示例的核心：Alignment.Top
当 alignContent 被设置为 Alignment.Top 时，Stack 中的所有子组件将作为一个整体，向上对齐到 Stack 容器的顶部边缘，并在水平方向上居中对齐。

这句话包含两层意思：

垂直方向「顶部对齐」：每个子组件的上边缘（top edge）都与 Stack 容器的上边缘对齐。由于子组件尺寸不同，上边缘对齐后，尺寸较小的组件会完全位于尺寸较大组件的内部（上方区域），而尺寸较大的组件则会向下延伸出更多空间。
水平方向「居中对齐」：所有子组件在水平方向上居中排列，即每个子组件的几何中心与 Stack 容器的水平中心对齐。
这种对齐方式在需要「从顶部向下堆叠元素」的场景中非常自然，例如：

在背景图片的顶部叠加标题文字。
在页面顶部叠加操作提示条。
在卡片顶部叠加标签或角标。

四、示例代码逐段精讲

下面我们逐段分析本文配套的示例代码，深入理解每一部分的设计意图和实现细节。

4.1 文件头与导入语句
/*

• 示例名称：Stack 顶层叠布局 —— alignContent(Alignment.Top) 顶部居中对齐
• 布局要点：
• 1. Stack 容器内的子组件按「层叠」方式排列，后添加的子组件会覆盖在先添加的上面。
• 2. alignContent 控制所有子组件在 Stack 容器内的「整体对齐方式」。
• 3. Alignment.Top 表示所有子组件整体「向上对齐」，并水平居中。
• 4. 每个子组件可以通过 .align() 单独微调自己在 Stack 中的位置。
     */

import { hilog } from ‘@kit.PerformanceAnalysisKit’;
这里的文件头注释是整个页面的「设计文档」，清晰标注了本示例要展示的核心概念。导入的 hilog 是鸿蒙的日志工具，用于在按钮点击时输出调试信息。

注意：我们只导入了实际使用的模块。在实际开发中，保持 import 列表的整洁是一个好习惯，避免未使用的导入引发编译警告。

4.2 组件结构与状态变量
@Entry
@Component
struct Index {
@State currentAlign: string = ‘Top’;
@State currentAlignment: Alignment = Alignment.Top;
@State boxCount: number = 3;
@State showInfo: boolean = true;
@Entry：标记该组件为页面的入口点，使它能被路由系统加载。
@Component：声明这是一个 ArkTS 组件。
@State：装饰的状态变量。当这些变量的值发生变化时，ArkTS 框架会自动重新渲染依赖它们的 UI 部分，这是声明式 UI 的核心机制。
currentAlign：当前对齐模式的名称（用于显示）。
currentAlignment：当前对齐模式的枚举值（用于布局）。
boxCount：层叠的盒子数量（预留扩展用）。
showInfo：控制说明面板的显示与隐藏。
4.3 主构建方法 build()

build() {
    Column() {
      this.buildHeader()
      Column() {
        Stack() { ... }
        .alignContent(this.currentAlignment)
        .width(320).height(240)
        .backgroundColor('#FFF7E6')
        .borderRadius(16)
        .border({ width: 2, color: '#FAAD14', style: BorderStyle.Dashed })
        .shadow({ radius: 12, color: 'rgba(0,0,0,0.1)', offsetX: 0, offsetY: 4 })
        .onClick(() => { this.showInfo = !this.showInfo; })
      }
      .width('100%').alignItems(HorizontalAlign.Center).margin({ top: 20 })

      if (this.showInfo) { this.buildDescription() }
      this.buildControls()
    }
    .width('100%').height('100%').backgroundColor('#F5F5F5').padding(16)
}

最外层使用 Column() 作为页面骨架，将标题、示例区域、说明面板、控制面板从上到下依次排列。这种「外层用 Column/Row 做结构，内层用 Stack 做堆叠」的组合方式是鸿蒙 UI 开发中的常见模式。

示例区域内部又嵌套了一层 Column()，并使用 .alignItems(HorizontalAlign.Center) 让 Stack 容器在水平方向上居中显示，与 Stack 内部的 alignContent(Alignment.Top) 形成清晰的层次分工。

4.4 Stack 容器与三个子组件

Stack() {
  // 子组件①：最底层 - 半透明灰色大底板
  Text('底板\n（最底层）')
    .width(280).height(200)
    .backgroundColor('rgba(200, 200, 200, 0.95)')
    .borderRadius(12)
    .textAlign(TextAlign.Center)
    .fontColor('#666666').fontSize(16)

  // 子组件②：中层 - 蓝色横条
  Text('中层\n蓝色横条')
    .width(240).height(80)
    .backgroundColor('rgba(24, 144, 255, 0.85)')
    .borderRadius(8)
    .textAlign(TextAlign.Center)
    .fontColor('#FFFFFF').fontSize(16)
    .fontWeight(FontWeight.Medium)

  // 子组件③：最顶层 - 绿色小方块
  Text('顶层\n绿色块')
    .width(140).height(70)
    .backgroundColor('rgba(82, 196, 26, 0.9)')
    .borderRadius(8)
    .textAlign(TextAlign.Center)
    .fontColor('#FFFFFF').fontSize(15)
    .fontWeight(FontWeight.Bold)
}
.alignContent(this.currentAlignment)

这是整个页面的核心片段。三个 Text 组件作为 Stack 的子组件，具有不同的尺寸和颜色：

灰色底板（280×200）：最大，作为背景层，半透明灰色让下层（如果有）稍微透出。
蓝色横条（240×80）：中等尺寸，半透明蓝色，叠在灰色之上。
绿色方块（140×70）：最小，不透明绿色，叠在最顶层。
由于 alignContent(Alignment.Top) 的作用，这三个组件都将其上边缘对齐到 Stack 容器的顶部。视觉上的效果是：

灰色底板的上沿紧贴 Stack 顶部，其下部向下延伸 200px。
蓝色横条的上沿也紧贴 Stack 顶部（与底板的上沿重合），但因为高度只有 80px，它只覆盖了底板的上半部分。
绿色方块同样上沿贴顶，高度 70px，覆盖在最上层。
这种「同顶上沿，层层覆盖」的效果，正是 Alignment.Top 的直观体现。

4.5 标题构建器

@Builder
buildHeader() {
    Column() {
      Text('Stack 顶层叠布局')
        .fontSize(24).fontWeight(FontWeight.Bold).fontColor('#1A1A1A')
      Text('子组件层叠 · 顶部居中对齐 · alignContent(Alignment.Top)')
        .fontSize(14).fontColor('#888888').margin({ top: 6 })
        .textAlign(TextAlign.Center)
    }
    .width('100%').padding({ top: 8, bottom: 8 })
}

@Builder 是 ArkTS 中用于封装重复 UI 片段的装饰器。这里我们将页面标题封装为一个独立的构建器，使 build() 方法更加清晰简洁。

标题使用两层 Text：主标题（大号加粗）和副标题（小号灰色），是鸿蒙应用中常见的标题排版方式。

4.6 布局说明面板

@Builder
buildDescription() {
    Column() {
      Text(`当前对齐：Alignment.${this.currentAlign}`)
        .fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1890FF')
        .padding({ top: 8, bottom: 4 })

      // 使用等宽字体绘制 ASCII 艺术边框
      Text('┌─────────────────────────────────────────┐')
        .fontSize(10).fontColor('#BBBBBB').fontFamily('monospace')

      Text('  灰色底板    ← 最先添加，在最底层').fontSize(13).fontColor('#555555')
      Text('  蓝色横条    ← 中间添加，叠在灰色之上').fontSize(13).fontColor('#555555')
      Text('  绿色方块    ← 最后添加，在最顶层').fontSize(13).fontColor('#555555')

      Text('  ─── ─── ─── ─── ─── ─── ─── ─── ───')
        .fontSize(10).fontColor('#BBBBBB').fontFamily('monospace')

      Text('  alignContent(Alignment.Top)').fontSize(14)
        .fontWeight(FontWeight.Medium).fontColor('#FAAD14')
      Text('  所有子组件的上边缘对齐 Stack 顶部，').fontSize(13).fontColor('#555555')
      Text('  水平居中排列，层层堆叠。').fontSize(13).fontColor('#555555')

      Text('└─────────────────────────────────────────┘')
        .fontSize(10).fontColor('#BBBBBB').fontFamily('monospace')
    }
    .width('100%').padding(12).backgroundColor('#FFFFFF')
    .borderRadius(12).shadow({ radius: 6, color: 'rgba(0,0,0,0.06)', offsetX: 0, offsetY: 2 })
    .margin({ top: 16, bottom: 8 })
}

这个说明面板的设计有几个值得注意的点：

动态显示当前对齐模式：Alignment.${this.currentAlign} 会随用户点击切换按钮而实时更新，让学习者可以直观地看到「切换了哪个对齐值」。
使用等宽字体绘制装饰性边框：fontFamily(‘monospace’) 配合 ASCII 风格的边框字符，在 UI 中模拟出终端风格的说明框，增加视觉趣味性。
层次化信息呈现：面板先说明「三个子组件各自是什么」，再说明「当前对齐模式的效果」，符合从现象到原理的认知顺序。
可隐藏设计：通过 showInfo 状态变量控制显隐，点击 Stack 区域即可切换，使页面在不同学习阶段可以灵活选择「看说明」还是「看效果」。
4.7 控制面板与对齐切换按钮

@Builder
buildControls() {
    Column() {
      Text('切换对齐模式').fontSize(14).fontWeight(FontWeight.Medium)
        .fontColor('#333333').margin({ bottom: 8 })

      Row({ space: 8 }) {
        this.alignButton('Top', Alignment.Top)
        this.alignButton('Center', Alignment.Center)
        this.alignButton('Bottom', Alignment.Bottom)
        this.alignButton('TopStart', Alignment.TopStart)
      }
      .width('100%').justifyContent(FlexAlign.Center).margin({ bottom: 12 })

      Text('💡 点击橙色虚线区域可切换信息面板显示')
        .fontSize(12).fontColor('#AAAAAA').textAlign(TextAlign.Center).width('100%')
    }
    // ... 样式
}

控制面板提供了四个对齐模式切换按钮：Top（顶部居中）、Center（整体居中）、Bottom（底部居中）、TopStart（顶部左对齐）。这种设计让学习者可以：

先观察 Alignment.Top 的效果（默认）。
再切换到 Alignment.Center 对比「整体居中」和「顶部居中」的区别。
切换到 Alignment.Bottom 观察「底部对齐」的差异。
切换到 Alignment.TopStart 理解「水平位置」的变化。
通过这种「对比学习」的方式，比单纯文字描述更能帮助开发者建立起对 alignContent 属性的直观理解。

4.8 对齐按钮构建器

@Builder
alignButton(label: string, alignment: Alignment) {
    Column() {
      Text(label)
        .fontSize(13)
        .fontColor(this.currentAlignment === alignment ? '#FFFFFF' : '#333333')
        .fontWeight(this.currentAlignment === alignment ? FontWeight.Bold : FontWeight.Normal)
    }
    .padding({ top: 10, bottom: 10, left: 12, right: 12 })
    .backgroundColor(this.currentAlignment === alignment ? '#1890FF' : '#F0F0F0')
    .borderRadius(8)
    .onClick(() => {
      this.currentAlign = label;
      this.currentAlignment = alignment;
    })
}

这个按钮构建器实现了「选中态高亮」的效果：

背景色：选中时为蓝色（#1890FF），未选中时为浅灰色（#F0F0F0）。
文字颜色：选中时为白色，未选中时为深灰色。
文字粗细：选中时为粗体，未选中时为常规。
这种视觉反馈让用户能一目了然地知道当前正在使用哪个对齐模式，是交互设计中「状态可见性」原则的良好实践。

五、alignContent 与其他对齐模式的对比效果

为了帮助读者深入理解 alignContent 的工作机制，下面我们逐一分析四种对齐模式下，示例中三个子组件的排列变化。

5.1 Alignment.Top（顶部居中）
┌───────────────────────┐
│ ┌──────┐ │ ← 三个子组件的上边缘都在这里
│ │ 绿块 │ │
│ ├──────────────┐ │
│ │ 蓝色横条 │ │
│ ├──────────────────┐ │
│ │ 灰色底板 │ │
│ │ │ │
│ │ │ │
│ └──────────────────┘ │
│ (橙色虚线边框) │
└───────────────────────┘
效果：三个组件的顶部都在同一水平线上。最矮的绿色块完全位于灰色底板的上半部分内部。这是本示例的默认模式。

5.2 Alignment.Center（整体居中）
┌───────────────────────┐
│ │
│ ┌──────────────────┐ │
│ │ ┌──────────────┐ │ │
│ │ │ ┌────────┐ │ │ │
│ │ │ │ 绿块 │ │ │ │
│ │ │ └────────┘ │ │ │
│ │ │ 蓝色横条 │ │ │
│ │ └──────────────┘ │ │
│ │ 灰色底板 │ │
│ └──────────────────┘ │
│ │
└───────────────────────┘
效果：三个组件作为一个整体，在 Stack 容器中垂直和水平方向都居中。注意此时灰色底板的上边缘不再贴顶，而是整体下移了。这是最直观的「居中」效果。

5.3 Alignment.Bottom（底部居中）
┌───────────────────────┐
│ │
│ │
│ ┌──────────────────┐ │
│ │ 灰色底板 │ │
│ ├──────────────────┘ │
│ │ 蓝色横条 │
│ ├──────────────┐ │
│ │ 绿块 │ │
│ └──────────────┘ │
│ (三个组件底部对齐) │
└───────────────────────┘
效果：三个组件的底边缘对齐到 Stack 容器的底部。与 Alignment.Top 完全对称，适合需要在底部叠加元素的场景。

5.4 Alignment.TopStart（顶部左对齐）
┌───────────────────────┐
│ ┌──────┐ │
│ │ 绿块 │ │
│ ├──────────────┐ │
│ │ 蓝色横条 │ │
│ ├──────────────────┐ │
│ │ 灰色底板 │ │
│ └──────────────────┘ │
│ │
└───────────────────────┘
效果：三个组件的顶部对齐，同时左边缘也对齐。与 Alignment.Top 的区别在于水平方向从「居中」变成了「左对齐」。这在需要从左上角开始堆叠元素时非常有用。

六、Stack 布局的高级用法

6.1 结合 .align() 为单个子组件设置独立对齐
alignContent 控制的是整体对齐，但如果你希望某个子组件「脱离」整体约束，可以使用 .align() 方法为它单独指定对齐方式：

Stack() {
  Text('我在正中间')
    .align(Alignment.Center)  // 这个子组件居中，不受 alignContent 影响
    .backgroundColor(Color.Pink)

  Text('我跟随整体')
    .backgroundColor(Color.LightGray)
}
.alignContent(Alignment.Top)

在上面的例子中，粉色文字会强制居中，而灰色文字跟随 Alignment.Top 贴顶。这种「整体 + 个别」的组合控制方式让 Stack 布局非常灵活。

6.2 使用 Stack 实现图片遮罩

Stack() {
  Image($r('app.media.background'))
    .width('100%')
    .height(200)

  // 半透明遮罩层
  Column()
    .width('100%')
    .height(200)
    .backgroundColor('rgba(0, 0, 0, 0.4)')

  // 遮罩上的文字
  Text('图片标题')
    .fontColor(Color.White)
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
}
.alignContent(Alignment.Center)

这是一个非常典型的图片封面组件：图片在最底层，半透明黑色遮罩居中覆盖，标题文字在最顶层。使用 Stack 可以轻松实现这种三层叠加结构，而不需要复杂的定位计算。

6.3 使用 Stack 实现红点角标

Stack() {
  // 主内容：一个图标
  Image($r('app.media.icon'))
    .width(48).height(48)

  // 角标：红色圆点 + 数字
  Text('3')
    .width(20).height(20)
    .backgroundColor(Color.Red)
    .borderRadius(10)
    .fontColor(Color.White)
    .fontSize(12)
    .textAlign(TextAlign.Center)
    .align(Alignment.TopEnd)   // 固定在右上角
    .margin({ top: -4, right: -4 })  // 微调偏移
}

通知角标、新消息提示、购物车数量标记等 UI 模式，都可以用 Stack + .align() 优雅地实现。

6.4 多层 Stack 嵌套

Stack() {
  // 底层：背景卡片
  Column()
    .width('100%').height(200)
    .backgroundColor('#F0F0F0').borderRadius(16)

  // 中层：使用 Row 水平排列多个子卡片
  Row({ space: 12 }) {
    // 内层 Stack：每个子卡片
    ForEach([1, 2, 3], (item: number) => {
      Stack() {
        Image($r('app.media.photo'))
          .width(100).height(150).borderRadius(8)
        Text(`照片 ${item}`)
          .width(100).textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .backgroundColor('rgba(0,0,0,0.5)')
          .align(Alignment.Bottom)
      }
    })
  }
  .padding(16)
}
.alignContent(Alignment.Center)

Stack 可以与其他布局容器（Row、Column、Flex、Grid 等）自由嵌套，构建出复杂的界面层次。

七、性能考量与最佳实践

7.1 避免过深的嵌套
虽然 Stack 支持多层嵌套，但过深的层叠结构会增加渲染复杂度。一个页面的 Stack 嵌套深度建议控制在 3 层以内。如果超过这个深度，可以考虑将部分子组件抽离为独立的 @Component，或将布局扁平化。

7.2 合理使用 .align() 与 alignContent
当所有子组件需要在同一方向对齐时，使用 alignContent，代码更简洁。
当个别子组件需要不同的对齐方式时，使用 .align() 单独控制。
避免对每个子组件都设置 .align()，那样会让代码显得冗余且难以维护。
7.3 透明度与渲染性能
Stack 中的子组件是层层渲染的，如果上层组件覆盖了下层组件的全部区域，下层组件实际上「看不见」，但仍在渲染队列中。对于复杂的场景（如频繁动画），可以考虑：

使用条件渲染（if / ForEach）动态添加/移除组件。
设置上层组件为不透明，让框架可以优化掉下层不可见部分的渲染。
7.4 使用背景色辅助调试
在开发阶段，给 Stack 容器设置一个明显的背景色（如示例中的 #FFF7E6 暖橙色），可以帮助你清晰地看到容器的边界范围，便于调试子组件的位置。生产环境中再移除或替换为合适的颜色。

八、常见问题与解决方案

8.1 子组件不显示或显示位置不对
可能原因：

Stack 容器没有设置明确的 width 和 height。
alignContent 设置的值与预期不符。
解决方案：

始终为 Stack 显式设置宽高，或通过父容器约束其尺寸。
检查 Alignment 枚举值是否正确，可以先用 Alignment.Center 作为基准进行调试。
8.2 子组件超出 Stack 边界
可能原因：

子组件的尺寸大于 Stack 容器的尺寸。
alignContent 将子组件推向边缘，导致部分区域溢出。
解决方案：

使用 .clip(true) 属性裁剪超出 Stack 边界的子组件内容。
重新审视子组件尺寸设计，确保最大子组件不超过容器尺寸。
8.3 点击事件穿透问题
可能原因：

上层组件有透明区域，点击事件「穿透」到了下层组件。
解决方案：

为上层组件的透明区域设置 .hitTestBehavior(HitTestMode.Block)，阻止事件穿透。
或使用 .hitTestBehavior(HitTestMode.Transparent) 主动让事件穿透。

Stack() {
  Button('下层按钮').onClick(() => { ... })
  Column()
    .width('100%').height('100%')
    .backgroundColor('rgba(0,0,0,0)')  // 透明层
    .hitTestBehavior(HitTestMode.Transparent)  // 点击穿透到下层
}

九、总结

本文以「Stack + alignContent(Alignment.Top) — 子组件层叠，顶部居中对齐」为具体示例，系统地介绍了鸿蒙原生 ArkTS 中 Stack 层叠布局的核心概念、属性用法、实战场景和最佳实践。

Stack 布局的核心要点可以概括为：

一叠多层：子组件在 Z 轴方向层层堆叠，后添加的覆盖先添加的。
整体对齐：alignContent 控制所有子组件作为一个整体的对齐方式。
个别微调：.align() 方法允许为单个子组件设置独立的对齐规则。
灵活嵌套：Stack 可以与 Row、Column、Flex 等布局容器自由组合。
广泛适用：从简单的图片叠加到复杂的自定义弹窗，Stack 都是高效的选择。
掌握 Stack 布局，意味着你可以在鸿蒙应用的 UI 构建中轻松实现「重叠」和「分层」的概念 —— 这是许多现代 UI 设计的基础能力。希望本文能帮助你在实际开发中更加自信地运用 Stack 布局，构建出层次丰富、交互流畅的鸿蒙原生应用。

十、参考资料

HarmonyOS NEXT 开发者文档 — Stack 容器组件
HarmonyOS NEXT 开发者文档 — Alignment 枚举
ArkTS 声明式开发指南 — 布局容器
本文配套示例代码：位于项目 entry/src/main/ets/pages/Index.ets，可在 DevEco Studio 中打开并运行，直观体验 Stack + alignContent(Alignment.Top) 的布局效果。