arkUI：Column和Rom的间距设置（列向，横向）

news2024/11/24 19:26:54

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") // 设置背景颜色为淡粉色
  }
}