智能客服
你问我答，随时在线为你解决问题
该组件从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
Row未设置宽度或高度时，在主轴或交叉轴方向上自适应子组件大小。
- 探索了解鸿蒙应用和多设备开发，学习如何构建应用/元服务应用形态HarmonyOS 应用One as All，All as One
元服务秒开直达 服务随行 无处不在
游戏为游戏创意玩法带来无限可能
多设备应用开发穿戴
折叠屏手机鸿蒙电脑开发者学堂视频课程Codelabs - 设计了解鸿蒙应用和多设备开发，学习如何构建应用/元服务
- 开发获取官方开发工具和文档等资源，将创意转化为鸿蒙应用开发工具DevEco Studio应用开发 IDE, AI Agent 和 CLI
小艺开放平台Skill 和智能体开发平台
ArkTS
ArKUI
AppGallery ConnectDevEco Testing开发资源工具下载示例代码开发文档最佳实践 - 分发通过华为应用市场发布你的应用，多渠道触达用户应用分发应用市场纯净安全的全场景应用分发平台
游戏中心
应用审核政策服务分发小艺HarmonyOS 的超级 AI 入口
智慧助手·今天
服务分发文档内容分发主题服务
内容分发文档 - 推广与变现一站式流量增长与营销变现平台推广应用推广引擎全链路应用推广与增长服务平台
鲸鸿动能广告为企业广告主提供广告营销服务
联运服务推广文档变现鲸鸿动能流量变现使能应用展示广告，实现流量变现应用内支付变现文档 - 生态合作携手伙伴共建共享鸿蒙智能终端生态伙伴 SDK一站式获取安全可靠的鸿蒙伙伴 SDK
生态服务鸿蒙应用开发、培训和人力服务
服务商伙伴中心华为终端云服务商伙伴的统一门户
伙伴入驻指南生态市场介绍，卖家和买家服务指引
廉洁政策合作伙伴诚信廉洁政策
- 支持获取客服帮助、技术支持、活动资讯等信息智能客服24小时 AI 在线自助服务，即问即答
社区问答在官方论坛提问，与开发者互动交流
在线提单提交工单，获得技术支持
开发者活动HDD 等线下活动速览及报名入口
资讯帮助指南
全部文档
指南
API
开放能力API
高级筛选
API version全部版本
设备全部
元服务API集不筛选
API参考概述
应用框架
系统
媒体
图形
应用服务
AI
公共基础能力
标准库
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
Row
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
更新时间: 2026-08-29 09:41
本文导读
沿水平方向布局的容器，支持设置子组件间距、对齐方式，适用于需要横向排列多个子组件的场景，如工具栏、标签栏、按钮组等。
说明
子组件
可以包含子组件。
接口
Row
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
Row(options?: RowOptions)
创建横向线性布局容器，可设置子组件间距。
说明
在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考布局优化指导。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options18+ | RowOptions | 否 | 横向布局的配置对象，用于设置子组件间距（单位：vp），其中space属性支持设置number或string类型的值。当需要自定义子组件间距时传入此参数；不传入时默认间距为0。 模型约束： 此接口仅可在Stage模型下使用。 说明： 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 |
Row18+
Phone18+PC/2in118+Tablet18+TV19+Wearable18+
Row(options?: RowOptions | RowOptionsV2)
创建横向线性布局容器，可设置子组件间距。
说明
在复杂界面中使用多组件嵌套时，若布局组件的嵌套层数过深或嵌套的组件数量过多，将会产生额外开销。建议通过移除冗余节点、利用布局边界减少布局计算、合理采用渲染控制语法及布局组件方法来优化性能。最佳实践请参考布局优化指导。
卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
模型约束： 此接口仅可在Stage模型下使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | RowOptions | RowOptionsV2 | 否 | 横向布局的配置对象，用于设置子组件间距（单位：vp），其中space属性支持设置number、string或Resource类型的值。不传入时默认间距为0。 说明： 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 |
RowOptions18+对象说明
Phone18+PC/2in118+Tablet18+TV19+Wearable18+
设置Row组件的子组件间距属性。
说明
为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。
卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
模型约束： 此接口仅可在Stage模型下使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space7+ | string | number | 否 | 是 | 横向布局元素间距。 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。 默认值：0 单位：vp 非法值：按默认值处理。 说明： space取值是大于等于0的数字，或者可以转换为数字的字符串，不支持设置百分比。 卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。 元服务API： 从API version 11开始，该接口支持在元服务中使用。 |
RowOptionsV218+对象说明
Phone18+PC/2in118+Tablet18+TV19+Wearable18+
设置Row组件的子组件间距属性。间距类型SpaceType支持number、string或Resource类型。
卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
模型约束： 此接口仅可在Stage模型下使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
展开
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| space | SpaceType | 否 | 是 | 横向布局元素间距。 取值范围：大于等于0。 从API version 9开始，justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时space参数不生效。 默认值：0 单位：vp 非法值：按默认值处理。 说明： space取值是大于等于0的数字，或者可以转换为非负数字的字符串，或者可以转换为数字的Resource类型数据，不支持设置百分比。负数作为非法值将被当作默认值0处理。 |
属性
除支持通用属性外，还支持以下属性：
alignItems
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
alignItems(value: VerticalAlign)
设置子组件在垂直方向上的对齐格式。调用后，子组件将按照指定方式在垂直方向对齐，默认为垂直居中对齐。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | VerticalAlign | 是 | 子组件在垂直方向上的对齐格式。 默认值：VerticalAlign.Center |
justifyContent8+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
justifyContent(value: FlexAlign)
设置子组件在水平方向上的对齐格式。调用后，子组件将按照指定方式在水平方向对齐，默认为起始端对齐。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| value | FlexAlign | 是 | 子组件在水平方向上的对齐格式。 默认值：FlexAlign.Start 说明： 从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时，space参数不生效。 |
说明
Row布局时若子组件不设置flexShrink则默认不会压缩子组件，即所有子组件主轴大小累加可超过容器主轴，此时FlexAlign.Center和FlexAlign.End的对齐行为会发生变化，子组件起始位置将与FlexAlign.Start一致。
reverse12+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
reverse(isReversed: Optional<boolean>)
设置子组件在水平方向上的排列顺序是否反转。设置为true时，子组件按照从右到左的顺序排列；设置为false时，子组件按照从左到右的顺序排列。适用于需要动态调整子组件显示顺序的场景，如国际化布局适配。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
模型约束： 此接口仅可在Stage模型下使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
展开
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| isReversed | Optional<boolean> | 是 | 子组件在水平方向上的排列顺序是否反转。 设置true表示子组件在水平方向上反转排列（从右到左），设置false表示子组件在水平方向上正序排列（从左到右）。参数值为undefined时视为true，主轴方向反转。 |
说明
若未设置reverse属性，主轴方向不反转；若设置了reverse属性，且参数值为undefined，则视为默认值true，主轴方向反转；若参数值为false，主轴方向不反转。
由于主轴排列方向受通用属性direction影响，若设置了direction属性，则当reverse属性设置为true时，总在direction属性生效的结果上再做一次反转；若reverse属性设置为false或未设置，则主轴方向由direction属性决定，不进行额外反转。
事件
支持通用事件。
示例
示例1（设置Row组件的布局属性）
本示例展示设置Row组件的布局属性，如间距、对齐方式等属性后的效果。
// resources/base/element/string.json
{
"string": [
{
"name": "stringSpace",
"value": "5"
}
]
} // xxx.ets
@Entry
@Component
struct RowExample {
build() {
Column({ space: 5 }) {
// 设置子组件水平方向的间距为5
Text('space').width('90%')
Row({ space: 5 }) {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 })
// 通过资源引用方式设置子组件水平方向的间距
Text('Resource space').width('90%')
// 使用资源引用方式设置space属性（API 18+支持）
Row({ space: $r('app.string.stringSpace') }) {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 })
// 设置子组件垂直方向对齐方式
Text('alignItems(Bottom)').width('90%')
// 设置子组件底部对齐
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
Text('alignItems(Center)').width('90%')
// 设置子组件垂直居中对齐
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
// 设置子组件水平方向对齐方式
Text('justifyContent(End)').width('90%')
// 设置子组件右对齐
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
Text('justifyContent(Center)').width('90%')
// 设置子组件水平居中对齐
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
}.width('100%')
}
} 
示例2（设置反转属性）
本示例展示设置Row组件的reverse属性后的效果，演示如何实现子组件排列顺序的反转。
@Entry
@Component
struct RowReverseSample {
build() {
Row() {
Text('1')
.width(100)
.height(50)
.backgroundColor(0xAFEEEE)
Text('2')
.width(100)
.height(50)
.backgroundColor(0x00FFFF)
}
.height(100)
.width(300)
.border({ width: 1 })
.reverse(true)
}
} 
华为开发者联盟 版权所有 ©2026
在 开发与测试 开放能力API 中进行搜索
请输入您想要搜索的关键词