引言

HarmonyOS 应用的页面由多个组件构成，需要通过布局管理让组件有序排列。布局是指应用特定的组件或属性来管理页面中 UI 组件的大小和位置关系，组件依照布局要求依次排列，最终构成完整的应用界面。布局属于特殊的容器组件，可以包含其他组件，也支持嵌套其他布局组件实现复杂页面。本节课将讲解 HarmonyOS 开发中 UI 布局的基础概念、三种核心基础布局，重点讲解线性布局 Column 与 Row 容器的参数、属性与对齐规则。

核心内容

布局基础概念

常用基础布局类型

HarmonyOS ArkUI 提供了多种基础布局，满足不同场景需求：

布局类型	容器组件	说明
线性布局	Column / Row	元素沿水平/垂直方向依次排列，是最常用的基础布局
层叠布局（重叠布局）	Stack	支持元素重叠效果，常用于浮动广告等场景
相对布局	RelativeContainer	支持子元素以兄弟元素或父容器为锚点设置相对位置，适合复杂界面场景

其他布局类型

除三种基础布局外，ArkUI 还提供 List 列表、栅格 GridRow/GridCol、网格 Grid、轮播 Swiper 等复杂布局，可根据场景选用。

布局容器支持嵌套，通过多层嵌套可以实现任意复杂的页面布局。实际开发中需要根据场景选择最简洁的布局实现，相对布局可以大幅简化分散定位元素的开发复杂度。

布局选型对比案例：当需要实现一个容器内五个元素分别位于左上、右上、右下、左下、中间位置时：

• 使用线性布局需要嵌套多层 Column 和 Row 容器才能实现，结构复杂。

• 使用相对布局只需要一个 RelativeContainer 容器，每个子组件基于父容器设置位置即可实现，代码更加简洁。

线性布局核心概念

线性布局是所有布局的基础，通过 Row 和 Column 构建。

主轴与交叉轴定义

线性容器默认包含两根相互垂直的轴：

容器	主轴方向	交叉轴方向
Column（垂直排列）	垂直方向	水平方向
Row（水平排列）	水平方向	垂直方向

容器接口与参数

Column 和 Row 的接口定义一致：

Column(value?: { space?: string | number })
Row(value?: { space?: string | number })

可选入参 space：用于设置子组件在主轴方向上的统一间距，可以快速实现等间距排列效果。

容器核心属性

属性名称	作用
justifyContent	设置子组件在主轴方向上的对齐格式
alignItems	设置子组件在交叉轴方向上的对齐格式

justifyContent 主轴对齐属性详解

参数类型为 FlexAlign，不同取值效果如下：

取值	对齐规则
Start	子组件在主轴方向首端对齐
Center	子组件在主轴方向中心对齐
End	子组件在主轴方向末端对齐
SpaceBetween	第一个元素与行首对齐，最后一个元素与行尾对齐，剩余空间均匀分配给元素之间
SpaceAround	第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly	所有元素等间距布局，包括首尾元素到容器边界的间距也和元素间间距相同

三种均匀间距模式的区别是高频考点，需要重点区分 SpaceBetween、SpaceAround、SpaceEvenly 的边界间距规则。

alignItems 交叉轴对齐属性详解

Column 容器的交叉轴对齐

Column 的交叉轴为水平方向，参数类型为 HorizontalAlign：

取值	对齐规则
Start	子组件在交叉轴方向首端对齐（左对齐）
Center	子组件在交叉轴方向居中对齐
End	子组件在交叉轴方向末端对齐（右对齐）

Row 容器的交叉轴对齐

Row 的交叉轴为垂直方向，参数类型为 VerticalAlign：

取值	对齐规则
Top	子组件在交叉轴方向顶部对齐
Center	子组件在交叉轴方向居中对齐
Bottom	子组件在交叉轴方向底部对齐

Column 和 Row 的交叉轴方向不同，alignItems 参数的类型和取值完全不同，开发时不要混淆。

布局开发实践流程

开发步骤

拿到 UI 设计稿后，遵循以下流程开发：

1. 确定页面整体布局结构，拆分页面层级。

2. 分析页面的元素构成，确定每个区域使用的基础组件。

3. 根据排列方向选择合适的布局容器，设置对齐方式和间距，控制元素的位置与大小。

案例：登录页面布局

以常见登录页面为例，整体内容从上到下排列：

1. 整体从上到下排列，顶层使用 Column 容器。

2. 顶部依次排列 Logo 图片、标题文本、账号输入框、密码输入框，直接作为 Column 子组件。

3. “短信验证码登录”和“忘记密码”需要水平排列，嵌套 Row 容器并设置两端对齐（justifyContent: SpaceBetween）。

4. 之后依次排列登录按钮、注册文本。

5. 最后底部“其他登录方式”的三个按钮需要水平排列，再次嵌套 Row 容器，通过 space 参数设置三个按钮的等间距。

代码结构示例：

build() {
    Column() {
        Image(...)
        Text(...)
        Text(...)
        TextInput(...)
        TextInput(...)
        Row() {
            Text(...)
            Text(...)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        Button(...)
        Text(...)
        Text(...)
        Row({ space: 10 }) {
            Button(...)
            Button(...)
            Button(...)
        }
    }
}

总结

本节课讲解了布局的核心概念与实践方法：

1. 布局基础：布局是管理 UI 组件大小和位置关系的特殊容器组件，支持嵌套实现复杂页面。ArkUI 提供线性布局（Column/Row）、层叠布局（Stack）、相对布局（RelativeContainer）三种基础布局，以及 List、Grid、Swiper 等复杂布局。

2. 线性布局核心：Column 主轴垂直、交叉轴水平；Row 主轴水平、交叉轴垂直。space 参数设置主轴统一间距，justifyContent 控制主轴对齐，alignItems 控制交叉轴对齐。

3. 开发流程：先确定页面结构、分析元素构成，再选择合适的容器，通过 justifyContent 和 alignItems 调整对齐方式，通过 space 调整子组件间距。

4. 布局选型：元素分散定位的复杂场景优先选择相对布局，减少嵌套，提升代码可读性和性能。