引言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 设计稿后遵循以下流程开发确定页面整体布局结构拆分页面层级。分析页面的元素构成确定每个区域使用的基础组件。根据排列方向选择合适的布局容器设置对齐方式和间距控制元素的位置与大小。案例登录页面布局以常见登录页面为例整体内容从上到下排列整体从上到下排列顶层使用Column容器。顶部依次排列 Logo 图片、标题文本、账号输入框、密码输入框直接作为 Column 子组件。“短信验证码登录”和“忘记密码”需要水平排列嵌套Row容器并设置两端对齐justifyContent: SpaceBetween。之后依次排列登录按钮、注册文本。最后底部“其他登录方式”的三个按钮需要水平排列再次嵌套Row容器通过space参数设置三个按钮的等间距。代码结构示例build() { Column() { Image(...) Text(...) Text(...) TextInput(...) TextInput(...) Row() { Text(...) Text(...) } .justifyContent(FlexAlign.SpaceBetween) Button(...) Text(...) Text(...) Row({ space: 10 }) { Button(...) Button(...) Button(...) } } }总结本节课讲解了布局的核心概念与实践方法布局基础布局是管理 UI 组件大小和位置关系的特殊容器组件支持嵌套实现复杂页面。ArkUI 提供线性布局Column/Row、层叠布局Stack、相对布局RelativeContainer三种基础布局以及List、Grid、Swiper等复杂布局。线性布局核心Column主轴垂直、交叉轴水平Row主轴水平、交叉轴垂直。space参数设置主轴统一间距justifyContent控制主轴对齐alignItems控制交叉轴对齐。开发流程先确定页面结构、分析元素构成再选择合适的容器通过justifyContent和alignItems调整对齐方式通过space调整子组件间距。布局选型元素分散定位的复杂场景优先选择相对布局减少嵌套提升代码可读性和性能。