HarmonyOS ArkTS 线性布局详解（Row & Column）
在 ArkTS 声明式 UI 中，线性布局（Linear Layout） 是最基础也最常用的布局方式。它可以让多个子组件按照 一个方向连续排列，非常适合构建列表、按钮组、文本块等界面结构。华为开发者
线性布局内部的排列规则非常直观：
Row容器：子元素按 水平方向 从左到右依次排列Column容器：子元素按 垂直方向 从上到下依次排列 华为开发者
一、基本概念
在理解线性布局之前，需要先知道几个基础术语：腾讯云
主轴（Main Axis）
主轴是组件排列的“方向线”。
- 在
Row中，主轴是 水平方向 - 在
Column中，主轴是 垂直方向
线性布局默认就是沿着主轴依次摆放子组件。华为开发者
交叉轴（Cross Axis）
交叉轴是垂直于主轴的方向：
- 在
Row中，交叉轴是 垂直方向 - 在
Column中，交叉轴是 水平方向
交叉轴主要用于控制“对齐效果”。腾讯云
布局容器 & 子元素
- 布局容器：就是
Row或Column，它负责布局规则 - 布局子元素：放在容器内部的所有组件，如
Text,Button等 腾讯云
二、Row 与 Column 容器的使用方法
1. 基础写法
最简单的线性布局写法看起来是这样的：
// 垂直排列
Column() {
Text("上面")
Text("中间")
Text("下面")
}
// 水平排列
Row() {
Text("左边")
Text("中间")
Text("右边")
}
在这个结构里，容器根据其类型决定了排列方向：
Column→ 上到下Row→ 左到右 华为开发者
三、控制排列间距（space 属性）
在默认情况下，子元素之间是紧凑排列的。如果你想在每一项之间设置一个统一的间隔，可以使用线性布局的 space 属性。腾讯云
示例：设置主轴方向的间距
Column({ space: 10 }) {
Text("第一行")
Text("第二行")
Text("第三行")
}
上面代码让垂直排列的每一行之间间隔 10px。同样，这个属性也可以用于 Row。腾讯云
四、交叉轴对齐：alignItems
默认情况下，子元素会在交叉轴方向默认居中对齐，但你可以通过 alignItems 调整对齐方式。腾讯云
常用对齐取值如下：
| 属性值 | Row 容器交叉轴对齐（纵向） | Column 容器交叉轴对齐（横向） |
|---|---|---|
Start / Top | 元素靠顶部排列 | 元素靠左侧排列 |
Center | 元素垂直居中 | 元素水平居中 |
End / Bottom | 元素靠底部排列 | 元素靠右侧排列 |
例如：
Row({ alignItems: VerticalAlign.Center }) {
Text("A")
Text("B")
Text("C")
}
这段代码让所有 Text 在竖直方向上都居中对齐。腾讯云
五、主轴对齐：justifyContent
当你需要更灵活地控制 主轴方向 上子组件的位置和分布时，可以使用 justifyContent 属性，这个属性可以让你：
- 子元素整体靠主轴起点
- 子元素整体靠主轴终点
- 子元素均匀分布
- 子元素居中分布 等
常见取值示例如下：
| 值 | 说明 |
|---|---|
Start | 靠主轴起点排列 |
Center | 在主轴上居中排列 |
End | 靠主轴末端排列 |
SpaceBetween | 子元素之间间距平均 |
SpaceAround | 子元素外侧也留有间隔 |
比如：
Row({ justifyContent: JustifyContent.Center }) {
Text("左")
Text("中")
Text("右")
}
这段代码会让三个文本在水平方向上整体居中排列。腾讯云
六、单个子元素对齐：alignSelf
如果某个子元素不想遵循 alignItems 的整体规则，可以使用 alignSelf 单独指定它在交叉轴上的对齐方式。例如：
Column({ alignItems: HorizontalAlign.Center }) {
Text("统一居中")
Text("单独靠左").alignSelf(HorizontalAlign.Start)
Text("统一居中")
}
这里第二个 Text 会覆盖整个容器的对齐规则，而靠左显示。腾讯云
七、总结与建议
线性布局虽然看起来最简单，但它是 构建 UI 结构的基础。在实际开发中，你会发现：
✔ 任何复杂布局都可以从一个或多个 Row / Column 组合而来 ✔ space、justifyContent、alignItems、alignSelf 是必须掌握的重要属性 ✔ 能熟练运用这些布局规则，可以让界面布局更优雅、更易维护
因为它是最常见也最直观的布局方式，建议在开始一个界面时先用线性布局布局大致结构，再根据需要混合其他布局方式。华为开发者
