摘要

Row 是 ArkUI 中最常用的水平布局组件之一，用于将多个子组件按照水平方向排列，广泛应用于导航栏、工具栏、商品信息栏、底部 TabBar 等场景。本文基于 HarmonyOS NEXT 与 OpenHarmony 开发环境，系统讲解 Row 的布局原理、主轴与交叉轴概念、space 间距、justifyContent 主轴对齐、alignItems 交叉轴对齐等核心属性，并结合多个完整 ArkTS 示例代码，帮助开发者快速掌握 ArkUI 水平布局开发方法，为构建高质量鸿蒙应用界面提供实践参考。

关键词

HarmonyOS NEXT；OpenHarmony；ArkUI；ArkTS；Row 布局；水平布局；justifyContent；alignItems

一、引言

在 ArkUI 页面开发中，Row 是出现频率最高的布局组件之一。无论是顶部导航栏、商品价格区域，还是底部菜单栏，都离不开水平布局能力。

与传统 Android 的 LinearLayout(horizontal) 类似，Row 会按照水平方向依次排列子组件，并提供丰富的对齐与间距控制能力。

典型应用场景包括：

• 顶部导航栏

• 商品价格栏

• 底部 TabBar

• 用户信息栏

• 工具按钮区域

• 图标 + 文本组合布局

二、开发环境

项目	说明
开发工具	DevEco Studio
开发语言	ArkTS
运行平台	HarmonyOS NEXT / OpenHarmony
API 版本	API 12 及以上
适用对象	ArkUI 初学者与进阶开发者

三、Row 布局原理

3.1 主轴与交叉轴

Row 的排列方向为 水平方向。

A

B

C

主轴（Main Axis）

水平方向

交叉轴（Cross Axis）

垂直方向

主轴控制组件的左右排列，交叉轴控制组件的上下对齐。

3.2 默认布局规则

如果不设置任何属性：

• 子组件从左到右排列

• 组件之间无额外间距

• 垂直方向默认居中

• 宽度由子组件内容决定

四、Row 常用属性详解

属性	作用
space	设置子组件间距
justifyContent	主轴对齐方式
alignItems	交叉轴对齐方式
width	设置宽度
height	设置高度
padding	内边距
margin	外边距
backgroundColor	背景颜色

五、案例一：基础 Row 布局

运行效果：三个文本会从左到右紧密排列。

六、案例二：space 设置间距

space: 20 表示每个子组件之间保持 20vp 间距。

七、案例三：justifyContent 主轴对齐

7.1 居中对齐

7.2 两端对齐

7.3 常用对齐方式

枚举值	效果
Start	靠左
Center	居中
End	靠右
SpaceBetween	两端对齐
SpaceAround	两侧保留间距
SpaceEvenly	均匀分布

八、案例四：alignItems 交叉轴对齐

修改为 VerticalAlign.Top 或 VerticalAlign.Bottom 可观察不同对齐效果。

九、案例五：Row 嵌套布局

实现“头像 + 用户信息”布局。

十、案例六：顶部导航栏实战

这是电商、资讯、视频类应用最常见的导航栏结构。

十一、案例七：底部 TabBar 布局

十二、综合实战：商品信息栏

十三、性能优化建议

性能优化建议

推荐实践

减少 Row 嵌套层级

过深的布局层级会增加测量与渲染开销。

长列表优先使用 List

不要在 Scroll 中放置大量 Row。

复用公共组件

导航栏、TabBar、商品卡片建议封装为自定义组件。

避免频繁刷新整个 Row

仅更新需要变化的状态数据。

合理使用 space

统一管理间距，提高布局一致性。

十四、常见问题与解决方案

问题 1：Row 中内容没有居中

高频

解决：

问题 2：组件之间间距过大

排查

检查：

• space 是否设置过大

• margin 是否重复添加

问题 3：文本被挤压显示不全

适配

解决：

问题 4：按钮无法平均分布

布局

解决：

问题 5：不同屏幕显示错位

响应式

解决：

• 使用百分比宽度

• 减少固定像素值

• 优先使用弹性布局

十五、总结

Row 是 ArkUI 水平布局的核心组件，掌握其主轴与交叉轴概念后，可以轻松实现导航栏、商品信息栏、用户信息栏、底部菜单等绝大多数水平排列场景。

本文通过多个完整 ArkTS 示例，系统讲解了：

• Row 布局原理

• space 间距控制

• justifyContent 主轴对齐

• alignItems 交叉轴对齐

• 导航栏实战

• TabBar 实战

• 商品信息栏综合案例

• 性能优化与常见问题处理

熟练掌握 Row 后，建议继续学习 Column、Flex、Stack 等布局组件，进一步构建完整的 HarmonyOS NEXT 页面布局体系。