在HarmonyOS应用开发中，布局是构建用户界面的核心。Row和Column作为ArkUI框架中最基础、最常用的线性布局容器，掌握它们能帮你快速搭建出结构清晰、视觉统一的页面。本文将带你从零开始，深入剖析这两个组件的属性、用法及最佳实践，助你高效开发。

Column：垂直布局的核心

Column（Column）是鸿蒙ArkUI中用于在垂直方向上排列子组件的容器，其主轴为纵轴，交叉轴为水平轴。它类似于Android中的LinearLayout(orientation=vertical)或Web开发中的flex-direction: column。Column适合构建列表项、表单、卡片式布局等需要纵向堆叠的场景。通过灵活配置其属性，开发者可以精确控制子组件的位置、间距与对齐方式。

通用属性详解

Column容器自身支持多种通用属性，包括宽度（width）、高度（height）、边框（border）、内边距（padding）、外边距（margin）等。这些属性与Web开发中的CSS类似，但需注意单位选择。

宽度与高度：支持px、vp、百分比（%）及常量如100%（占满父容器）。例如：

Column() {
// 子组件
}
.width('100%') // 占满父容器宽度

提示：若未显式设置宽度，默认会根据子组件的最大宽度自适应。

在这里插入图片描述在这里插入图片描述

高度：用法与宽度类似，常用于限制容器高度或配合滚动组件（Scroll）。

Column() { /* ... */ }
.height(200) // 固定高度 200vp
在这里插入图片描述

边框与间距设置

边框（border）：通过border设置，参数类型为BorderOptions接口，包含粗细（width）、颜色（color）、圆角半径（radius）及样式（style）。

.border({
width: 2,
color: '#FF0000',
radius: 10
})

源码视角： 是一个接口，意味着你可以只传入需要的属性，其余使用默认值。

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

内边距（padding）：设置容器内部边距，即子组件与容器边框之间的距离。

.padding(10) // 四周内边距均为 10vp
.padding({ left: 5, right: 15 }) // 精确控制各方向

关键区别： 是“内边距”， 是“外边距”。

在这里插入图片描述在这里插入图片描述

外边距（margin）：控制当前Column与其外部兄弟组件或父容器的距离。

.margin(20) // 外边距 20vp

⚠️ 注意： 不会影响子组件之间的间距，仅作用于当前容器整体。

在这里插入图片描述

间距与对齐

子组件间距（space）：使用space属性统一设置所有子组件之间的垂直间距，比逐个设置margin更高效。

Column({ space: 10 }) { // 所有子组件之间间隔 10vp
Text('Item 1')
Text('Item 2')
Text('Item 3')
}

✅ 最佳实践：优先使用 而非为每个子项加 ，代码更简洁且语义明确。

在这里插入图片描述

交叉轴对齐（alignItems）：控制子组件在水平方向上的对齐方式。可选值来自HorizontalAlign枚举：

  • HorizontalAlign.Start：左对齐
  • HorizontalAlign.Center：居中
  • HorizontalAlign.End：右对齐
在这里插入图片描述在这里插入图片描述在这里插入图片描述

记忆技巧： → 垂直排列 → 控制左右对齐 → 使用 。

在这里插入图片描述在这里插入图片描述

主轴对齐（justifyContent）：控制子组件在垂直方向上的分布方式。可选值包括：

  • FlexAlign.Start：顶部对齐（默认）
  • FlexAlign.Center：垂直居中
  • FlexAlign.End：底部对齐
  • FlexAlign.SpaceBetween：首尾贴边，中间均匀分布
  • FlexAlign.SpaceAround：每个元素上下间距相等，首尾留一半
  • FlexAlign.SpaceEvenly：所有间距完全相等
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

应用场景：

  • ：常用于页脚按钮（“取消”在左，“确定”在右）；
  • ：用于居中弹窗内容；
  • ：用于均匀分布导航图标。
在这里插入图片描述在这里插入图片描述

单位选择：px vs vp

在HarmonyOS开发中，合理选择尺寸单位对适配多设备至关重要。与Java、Python、JavaScript等语言中处理屏幕适配的思路类似，鸿蒙提供了两种主要单位：

  • px（像素）：物理像素单位，不随屏幕密度缩放。适用于1px分割线、细边框等绝对精确场景。
  • vp（虚拟像素）：鸿蒙推荐的逻辑像素单位，系统根据设备DPI自动换算。1vp = 1px @ 160 DPI。适用于绝大多数UI元素，如字体、按钮、间距、容器尺寸等。

❌ 风险：在不同设备上视觉大小不一致，可能导致 UI 错位。

场景推荐单位
文字大小、按钮、容器宽高、间距✅
1px 分割线、极细边框✅
设计稿标注（通常基于 vp）✅ 直接使用 vp

注意事项：设计师提供的HarmonyOS设计稿通常以vp为单位；避免混用px和vp；使用px时，可通过px2vp()工具函数转换。在TypeScript或ArkTS中，这些单位转换逻辑可以封装成工具函数，类似Go语言中的类型转换模式。

[AFFILIATE_SLOT_1]

↔️ Row：水平布局的精髓

Row（Row）是Column的“水平兄弟”，用于在水平方向上排列子组件。它同样基于Flex布局模型，默认从左到右排列。

核心区别： 主轴为垂直， 主轴为水平。因此，两者的对齐属性所作用的方向互换。

对比效果：Column垂直排列，Row水平排列。

在这里插入图片描述在这里插入图片描述

代码复用提示：同一套子组件，仅需将 替换为 ，即可实现横向布局，极大提升开发效率。

Row的对齐属性

交叉轴对齐（alignItems）：在Row中，主轴为水平，交叉轴变为垂直方向，因此使用VerticalAlign枚举：

  • VerticalAlign.Top：顶部对齐
  • VerticalAlign.Center：垂直居中
  • VerticalAlign.Bottom：底部对齐
在这里插入图片描述在这里插入图片描述在这里插入图片描述

记忆技巧： → 水平排列 → 控制上下对齐 → 使用 。

主轴对齐（justifyContent）：控制水平方向分布，取值与Column相同（FlexAlign枚举），但作用方向变为左右。

  • Start：左对齐（默认）
  • Center：水平居中
  • End：右对齐
  • SpaceBetween / SpaceAround / SpaceEvenly：水平间距分布

✅ 无需重复学习：只要理解主轴方向， 的行为逻辑完全一致。

在这里插入图片描述

总结与建议

布局主轴方向alignItems 方向justifyContent 方向
垂直 ↓水平（）垂直（）
水平 →垂直（）水平（）

️ 开发口诀：

  • “Column 看左右，Row 看上下” —— 指 ；
  • “主轴用 justifyContent，交叉轴用 alignItems”。

掌握Row与Column的异同，是构建鸿蒙应用UI的第一步。结合space、padding、margin和对齐属性，几乎可以实现所有常见的线性布局需求。

[AFFILIATE_SLOT_2]

全套代码示例

以下是一个完整的示例，展示了Row和Column的常见用法：

@Entry
@Component
struct Index {
build() {
/*
Column({space:10}){
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
}
.width('100%')
.height('100%')
.border({width:1,color:'green',radius:50})
.alignItems(HorizontalAlign.End)
.justifyContent(FlexAlign.SpaceEvenly)
* */
Row({space:10}){
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
Text('你好，VON')
.width(100)
.height(100)
.border({width:1,color:'red',radius:50})
}
.width('100%')
.height('100%')
.border({width:1,color:'green',radius:50})
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.)
}
}

✨ 结语

本文从Column和Row的核心概念出发，详细讲解了它们的通用属性、对齐方式及单位选择。通过实际代码示例，你应该能够快速上手这两个基础布局组件。在后续开发中，合理搭配这些属性，就能构建出适配多设备的精美界面。持续实践，你的HarmonyOS开发技能将不断提升！

BorderOptionspaddingmarginmarginspacemarginColumnalignItemsHorizontalAlignSpaceBetweenCenterSpaceEvenlyvppxColumnRowColumnRowRowalignItemsVerticalAlignjustifyContentColumnHorizontalAlignFlexAlignRowVerticalAlignFlexAlignalignItems