arkUI:Column和Rom的间距设置(列向,横向)
- 1 主要内容说明
- 2 相关内容举例和说明
- 2.1 Column的间距(列的间距)
- 2.1.1 源码1 (Column的间距)
- 2.1.2 源码1运行效果
- 2.2 Row的间距(横向间距)
- 2.2.1 源码2(Row的间距)
- 3.结语
- 4.定位日期
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;