HarmonyOS应用开发实战（基础篇）Day08-《构建布局详解上》

通过灵活组合 `Stack` 与 `Flex`，开发者可以构建出既美观又高效的鸿蒙应用界面，充分释放 ArkUI 的布局潜力。

●VON

243人浏览 · 2026-02-22 03:38:50

●VON · 2026-02-22 03:38:50 发布

在这里插入图片描述

构建布局详解上

层叠布局（Stack）
弹性布局（Flex）

参考文档：官方文档参考

层叠布局（Stack）

Stack 是 ArkUI 中一种强大的层叠容器组件，用于将多个子元素在同一平面区域内堆叠显示。与 Column 或 Row 的线性排列不同，Stack 允许子组件在 Z 轴上重叠，非常适合实现卡片浮层、图标叠加、自定义弹窗、水印、徽标（Badge） 等复杂视觉效果。

基础布局

在 Stack 容器中，所有子组件默认居中堆叠，即它们的中心点对齐于 Stack 的中心。每个子组件可独立设置自身的尺寸、位置、边距等样式，互不影响布局流。

以下是一个基础示例（源自官方文档）：

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、返回按钮、通知图标等。

Stack({ alignContent: Alignment.TopStart }) {
  // 子组件
}

在这里插入图片描述

Top（顶部居中对齐）

子组件水平居中，顶部对齐。适用于标题栏中的应用名称、搜索框等。

Stack({ alignContent: Alignment.Top }) { /* ... */ }

在这里插入图片描述

TopEnd（右上角对齐）

子组件的右上角与容器右上角对齐。典型用途包括“关闭”按钮、用户头像、消息红点等。

Stack({ alignContent: Alignment.TopEnd }) { /* ... */ }

在这里插入图片描述

Start（左侧居中对齐）

子组件垂直居中，左侧对齐。可用于侧边导航图标、语音输入按钮等。

Stack({ alignContent: Alignment.Start }) { /* ... */ }

在这里插入图片描述

Center（绝对居中）

这是 Stack 的默认对齐方式。子组件在水平和垂直方向均居中，广泛用于加载动画、模态弹窗、启动页 Logo 等场景。

Stack({ alignContent: Alignment.Center }) { /* ... */ }
// 或省略 alignContent，效果相同

在这里插入图片描述

End（右侧居中对齐）

子组件垂直居中，右侧对齐。常用于操作菜单、分享按钮、录音指示器等。

Stack({ alignContent: Alignment.End }) { /* ... */ }

在这里插入图片描述

BottomStart（左下角对齐）

子组件左下角对齐。适用于悬浮操作按钮（FAB）、版权信息、语音输入麦克风等。

Stack({ alignContent: Alignment.BottomStart }) { /* ... */ }

在这里插入图片描述

Bottom（底部居中对齐）

子组件水平居中，底部对齐。常见于播放器控制栏、确认按钮、进度提示等。

Stack({ alignContent: Alignment.Bottom }) { /* ... */ }

在这里插入图片描述

BottomEnd（右下角对齐）

子组件右下角对齐。这是悬浮操作按钮（Floating Action Button, FAB） 的经典位置，也用于“回到顶部”按钮、客服入口等。

Stack({ alignContent: Alignment.BottomEnd }) { /* ... */ }

在这里插入图片描述

🎯 设计建议：

使用 Stack 时，应避免过多层叠导致视觉混乱；

可结合 opacity、elevation（如有）增强层次感；

对于动态内容（如红点数字），建议将徽标作为独立子组件置于目标图标之上。

弹性布局（Flex）

Flex 是 ArkUI 中实现响应式、自适应布局的核心容器，其行为完全遵循 CSS Flexbox 规范，支持主轴方向、换行、对齐、弹性伸缩等能力。Row 和 Column 实际上是 Flex 的语法糖（Row = Flex({ direction: FlexDirection.Row })）。

布局方向

通过 direction 属性控制主轴方向，决定子组件的排列走向。

Row（水平从左到右）

主轴为水平方向，子组件从左向右依次排列。等同于 Row 组件。

Flex({ direction: FlexDirection.Row }) {
  // 子组件水平排列
}

✅ 适用场景：标签栏、工具栏、商品 SKU 选择、横向滚动列表项。

在这里插入图片描述

Column（垂直从上到下）

主轴为垂直方向，子组件从上到下依次排列。等同于 Column 组件。

Flex({ direction: FlexDirection.Column }) {
  // 子组件垂直排列
}

✅ 适用场景：表单、设置列表、消息流、垂直导航菜单。

在这里插入图片描述

RowReverse（水平从右到左）

主轴仍为水平，但子组件从右向左排列。适用于 RTL（Right-to-Left）语言环境或特殊视觉需求。

Flex({ direction: FlexDirection.RowReverse }) {
  // 子组件从右向左排列
}

⚠️ 注意：此属性不改变文本方向，仅影响布局顺序。

在这里插入图片描述

ColumnReverse（垂直从下到上）

主轴为垂直，子组件从下向上排列。可用于聊天消息（最新在底部）、倒计时面板等。

Flex({ direction: FlexDirection.ColumnReverse }) {
  // 子组件从下向上排列
}

在这里插入图片描述

布局换行

当子组件总尺寸超过容器主轴长度时，可通过 wrap 属性控制是否换行。

FlexWrap.NoWrap（默认，不换行）

子组件强制在一行（或一列）内显示，超出部分被裁剪或压缩。这是默认行为。

Flex({ wrap: FlexWrap.NoWrap }) {
  // 所有子项挤在一行，可能溢出
}

❌ 风险：内容可能被截断，影响可用性。

在这里插入图片描述

FlexWrap.Wrap（自动换行）

当主轴空间不足时，子组件自动折行到下一行（或下一列），从左到右、从上到下排列。

Flex({ 
  direction: FlexDirection.Row,
  wrap: FlexWrap.Wrap 
}) {
  // 子项自动换行
}

✅ 适用场景：标签云、商品分类、兴趣选择、多选按钮组。

在这里插入图片描述

FlexWrap.WrapReverse（反向换行）

换行方向反转：在水平布局中，新行出现在上方；在垂直布局中，新列出现在左侧。较少使用，但可用于特殊动效或数据可视化。

Flex({ 
  direction: FlexDirection.Row,
  wrap: FlexWrap.WrapReverse 
}) {
  // 新行从上往下堆叠（反向）
}

🔍 视觉效果：第二行显示在第一行上方，形成“向上生长”的布局。

在这里插入图片描述

总结与最佳实践

布局类型	核心能力	典型场景
`Stack`	层叠、绝对定位、九宫格对齐	徽标、浮层、水印、自定义弹窗
`Flex`	弹性伸缩、方向控制、自动换行	响应式表单、工具栏、标签云、网格布局