arkUI：Column和Rom的间距设置（列向，横向）
1 主要内容说明
Column：垂直布局组件，子组件从上到下依次排列。适合需要纵向展示内容的场景。通过 space 属性可以控制子组件之间的垂直间距，width 和 height 属性可以按百分比调整子组件大小。
Row：水平布局组件，子组件从左到右依次排列。适合横向排列的内容展示，space 属性可调整子组件间的水平间距，layoutWeight 用于平分或调整组件占用的空间比例。
2 相关内容举例和说明
2.1 Column的间距（列的间距）
Column 是一个垂直布局组件，可将子组件从上到下依次排列。通过 Column，可以轻松创建层次分明的布局，适合多层级内容的展示。以下源码1中创建了两个 Column。第一个 Column 是“对照组”，用于展示基本的垂直布局。第二个 Column 是“实验组”，设置了 space 属性，增加了子组件之间的间距。space 属性用于设置 Column 中子组件的间距，单位为 vp（虚拟像素）。在实验组中，space: 20 为组件之间添加了 20vp 的垂直间距，使得组件之间的空白更明显，有助于提升界面的层次感。在 Column 中的 Text 组件使用了 width 和 height 属性，分别设置为父组件宽度和高度的百分比，例如 width(“90%”) 和 height(“10%”)，确保每个组件在垂直方向的大小一致。backgroundColor 属性为每个组件添加了背景颜色，便于区分组件。主 Column 设置了 height(“100%”) 和 width(“100%”)，使其占据父容器的全部空间。同时，设置 backgroundColor 属性可以为整个页面添加背景颜色，让整体设计更加协调。
2.1.1 源码1 （Column的间距）
@Entry
@Component
struct PageSpace {
build() {
Column() {
// 第一个Column组件，包含三个文本组件，对照组
Column() {
Text("组件1，对照组")
.backgroundColor("#bbf")
.width("90%")
.height("10%")
Text("组件2，对照组")
.backgroundColor("#fff")
.width("90%")
.height("10%")
Text("组件3，对照组")
.backgroundColor("#ff72ff93")
.width("90%")
.height("10%")
}
// 空白占位符
Blank()
// 第二个Column组件，包含三个文本组件，实验组，设置Column间距为20vp
Column({ space: 20 }) {
Text("组件1，实验组，Column间距20vp")
.backgroundColor("#bbf")
.width("90%")
.height("10%")
Text("组件2，实验组，Column间距20vp")
.backgroundColor("#fff")
.width("90%")
.height("10%")
Text("组件3，实验组，Column间距20vp")
.backgroundColor("#ff72ff93")
.width("90%")
.height("10%")
}
// 空白占位符
Blank()
}
.height("100%") // 设置主Column的高度为100%
.width("100%") // 设置主Column的宽度为100%
.backgroundColor("#ffa") // 设置背景颜色
}
}
2.1.2 源码1运行效果
2.2 Row的间距（横向间距）
结构与布局：使用嵌套的 Row 组件构建横向排列的文本组件。其中第一个 Row 是对照组，第二个 Row 是实验组，增加了 space 属性以观察组件之间的间距变化。layoutWeight 属性的应用：设置了两个 Row 的 layoutWeight 为 1，使它们在父容器中平分可用空间。这在横向排列多个容器时很有用。指定了组件的 width 和 height 相对于父容器的百分比，并调整了 backgroundColor 和间距参数，使代码逻辑清晰、结构清楚。
2.2.1 源码2（Row的间距）
@Entry
@Component
struct PageSpace {
build() {
Row() {
// 对照组：第一个 Row 组件，用于横向排列三个文本组件
Row() {
Text("组件1，对照组，横向排列")
.backgroundColor("#bbf") // 设置背景颜色为浅蓝色
.width("10%") // 宽度为父组件的 10%
.height("90%") // 高度为父组件的 90%
Text("组件2，对照组，横向排列")
.backgroundColor("#fff") // 设置背景颜色为白色
.width("10%")
.height("90%")
Text("组件3，对照组，横向排列")
.backgroundColor("#ff72ff93") // 设置背景颜色为淡紫色
.width("10%")
.height("90%")
}
.layoutWeight(1) // 设置第一个 Row 组件的权重，使其占用相等空间
// 实验组：第二个 Row 组件，包含三个文本组件，设置 Row 间距为 15
Row({ space: 15 }) {
Text("组件1，实验组，横向排列")
.backgroundColor("#bbf")
.width("10%")
.height("90%")
Text("组件2，实验组，横向排列")
.backgroundColor("#fff")
.width("10%")
.height("90%")
Text("组件3，实验组，横向排列")
.backgroundColor("#ff72ff93")
.width("10%")
.height("90%")
}
.layoutWeight(1) // 设置第二个 Row 组件的权重，使其占用相等空间
}
.height("100%") // 设置主 Row 组件的高度为 100%
.width("100%") // 设置主 Row 组件的宽度为 100%
.backgroundColor("#fcc") // 设置背景颜色为淡粉色
}
}
3.结语
column组件内还可以另外添加其他组件，如按钮、开关等。简单内容也简单过一遍。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！
4.定位日期
2024-11-6；
10:36；