构建布局详解上
参考文档：官方文档参考
层叠布局（Stack）
Stack 是 ArkUI 中一种强大的层叠容器组件 ，用于将多个子元素在同一平面区域内堆叠显示 。与 Column 或 Row 的线性排列不同，Stack 允许子组件在 Z 轴上重叠，非常适合实现卡片浮层、图标叠加、自定义弹窗、水印、徽标（Badge） 等复杂视觉效果。
基础布局
在 Stack 容器中，所有子组件默认居中堆叠 ，即它们的中心点对齐于 Stack 的中心。每个子组件可独立设置自身的尺寸、位置、边距等样式，互不影响布局流。
以下是一个基础示例（源自官方文档）：
ts
Stack() {
Text('First')
.width(100)
.height(100)
.backgroundColor(Color.Pink)
Text('Second')
.width(80)
.height(80)
.backgroundColor(Color.Yellow)
Text('Third')
.width(60)
.height(60)
.backgroundColor(Color.Green)
}
.width(200)
.height(200)在此代码中，三个 Text 组件依次绘制，后绘制的会覆盖在先绘制的之上（Z 轴顺序由代码书写顺序决定）。由于未指定对齐方式，三者均以 Stack 中心为基准进行定位。
💡 关键特性：
- 子组件不参与主轴/交叉轴布局计算；
- 容器尺寸需显式设置（或由父容器约束），否则可能无法正确显示；
- 支持通过
alignContent属性统一控制所有子项的默认对齐方式。
对齐方式
Stack 提供了丰富的对齐选项，通过 alignContent 属性（或在子组件上使用 align 修饰符）控制子元素在容器内的定位。对齐方式基于 九宫格模型，共 9 个预设位置，覆盖四角、四边中点及中心。
官方示例
华为官方文档提供了一个标准对齐示意图，清晰展示了 Stack 的九种对齐锚点：
开发者可根据 UI 需求，选择最合适的对齐方式，无需手动计算坐标。
TopStart（左上角对齐）
子组件的左上角 与 Stack 容器的左上角对齐。常用于放置 Logo、返回按钮、通知图标等。
ts
Stack({ alignContent: Alignment.TopStart }) {
// 子组件
}
Top（顶部居中对齐）
子组件水平居中 ，顶部对齐。适用于标题栏中的应用名称、搜索框等。
ts
Stack({ alignContent: Alignment.Top }) { /* ... */ }
TopEnd（右上角对齐）
子组件的右上角与容器右上角对齐。典型用途包括"关闭"按钮、用户头像、消息红点等。
ts
Stack({ alignContent: Alignment.TopEnd }) { /* ... */ }
Start（左侧居中对齐）
子组件垂直居中 ，左侧对齐。可用于侧边导航图标、语音输入按钮等。
ts
Stack({ alignContent: Alignment.Start }) { /* ... */ }
Center（绝对居中）
这是 Stack 的默认对齐方式。子组件在水平和垂直方向均居中，广泛用于加载动画、模态弹窗、启动页 Logo 等场景。
ts
Stack({ alignContent: Alignment.Center }) { /* ... */ }
// 或省略 alignContent，效果相同
End（右侧居中对齐）
子组件垂直居中 ，右侧对齐。常用于操作菜单、分享按钮、录音指示器等。
ts
Stack({ alignContent: Alignment.End }) { /* ... */ }
BottomStart（左下角对齐）
子组件左下角对齐。适用于悬浮操作按钮（FAB）、版权信息、语音输入麦克风等。
ts
Stack({ alignContent: Alignment.BottomStart }) { /* ... */ }
Bottom（底部居中对齐）
子组件水平居中 ，底部对齐。常见于播放器控制栏、确认按钮、进度提示等。
ts
Stack({ alignContent: Alignment.Bottom }) { /* ... */ }
BottomEnd（右下角对齐）
子组件右下角 对齐。这是悬浮操作按钮（Floating Action Button, FAB） 的经典位置，也用于"回到顶部"按钮、客服入口等。
ts
Stack({ alignContent: Alignment.BottomEnd }) { /* ... */ }
🎯 设计建议：
- 使用
Stack时，应避免过多层叠导致视觉混乱；- 可结合
opacity、elevation（如有）增强层次感；- 对于动态内容（如红点数字），建议将徽标作为独立子组件置于目标图标之上。
弹性布局（Flex）
Flex 是 ArkUI 中实现响应式、自适应布局 的核心容器，其行为完全遵循 CSS Flexbox 规范，支持主轴方向、换行、对齐、弹性伸缩等能力。Row 和 Column 实际上是 Flex 的语法糖（Row = Flex({ direction: FlexDirection.Row })）。
布局方向
通过 direction 属性控制主轴方向，决定子组件的排列走向。
Row（水平从左到右）
主轴为水平方向，子组件从左向右依次排列。等同于 Row 组件。
ts
Flex({ direction: FlexDirection.Row }) {
// 子组件水平排列
}✅ 适用场景：标签栏、工具栏、商品 SKU 选择、横向滚动列表项。
Column（垂直从上到下）
主轴为垂直方向，子组件从上到下依次排列。等同于 Column 组件。
ts
Flex({ direction: FlexDirection.Column }) {
// 子组件垂直排列
}✅ 适用场景：表单、设置列表、消息流、垂直导航菜单。
RowReverse（水平从右到左）
主轴仍为水平，但子组件从右向左排列。适用于 RTL（Right-to-Left）语言环境或特殊视觉需求。
ts
Flex({ direction: FlexDirection.RowReverse }) {
// 子组件从右向左排列
}⚠️ 注意 ：此属性不改变文本方向，仅影响布局顺序。
ColumnReverse（垂直从下到上）
主轴为垂直，子组件从下向上排列。可用于聊天消息（最新在底部）、倒计时面板等。
ts
Flex({ direction: FlexDirection.ColumnReverse }) {
// 子组件从下向上排列
}
布局换行
当子组件总尺寸超过容器主轴长度时，可通过 wrap 属性控制是否换行。
FlexWrap.NoWrap（默认，不换行）
子组件强制在一行（或一列）内显示，超出部分被裁剪或压缩。这是默认行为。
ts
Flex({ wrap: FlexWrap.NoWrap }) {
// 所有子项挤在一行，可能溢出
}❌ 风险：内容可能被截断，影响可用性。
FlexWrap.Wrap（自动换行）
当主轴空间不足时，子组件自动折行到下一行（或下一列），从左到右、从上到下排列。
ts
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.Wrap
}) {
// 子项自动换行
}✅ 适用场景：标签云、商品分类、兴趣选择、多选按钮组。
FlexWrap.WrapReverse（反向换行）
换行方向反转：在水平布局中，新行出现在上方；在垂直布局中，新列出现在左侧。较少使用，但可用于特殊动效或数据可视化。
ts
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.WrapReverse
}) {
// 新行从上往下堆叠（反向）
}🔍 视觉效果 ：第二行显示在第一行上方，形成"向上生长"的布局。
总结与最佳实践
| 布局类型 | 核心能力 | 典型场景 |
|---|---|---|
Stack |
层叠、绝对定位、九宫格对齐 | 徽标、浮层、水印、自定义弹窗 |
Flex |
弹性伸缩、方向控制、自动换行 | 响应式表单、工具栏、标签云、网格布局 |
使用建议：
- 优先使用
Row/Column：若无需换行或反向布局，它们更简洁； Stack不用于常规流式布局：它会破坏文档流，仅用于装饰性或覆盖性元素；- 换行布局务必测试多设备：不同屏幕宽度下，换行行数可能变化，需确保 UI 一致性；
- 结合
justifyContent与alignItems：实现复杂的对齐与分布效果； - 性能考量 ：
Stack中大量子组件可能影响渲染性能，建议控制数量。
通过灵活组合 Stack 与 Flex，开发者可以构建出既美观又高效的鸿蒙应用界面，充分释放 ArkUI 的布局潜力。