HarmonyOS ArkUI容器类组件-线性布局容器（Row、Column）

线性布局容器（Row、Column）

线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。

主轴和纵轴概念

什么是主轴和纵轴？对于线性容器来说，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。

Row

Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。

Row定义介绍

interface RowInterface {
  (value?: { space?: string | number }): RowAttribute;
}

• value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距，简单样例如下所示：

    Row() {
      Text()
        .width(90)
        .height('100%')
        .backgroundColor("#aabbcc")
      Text()                        // 模拟子组件之间的间隔为20
        .width(20)
        .height('100%')
      Text()
        .width(20)
        .height('100%')
        .layoutWeight(1)
        .backgroundColor("#ccaabb")
    }
    .width('100%')
    .height(60)

    Row({space: 20}) {              // 设置子组件之间的间隔为20
      Text()
        .width(90)
        .height('100%')
        .backgroundColor("#aabbcc")
      Text()
        .width(20)
        .height('100%')
        .layoutWeight(1)
        .backgroundColor("#ccaabb")
    }
    .margin({top: 10})
    .width('100%')
    .height(60)

样例运行结果如5_1所示：

Row属性介绍

declare class RowAttribute extends CommonMethod<RowAttribute> {
  alignItems(value: VerticalAlign): RowAttribute;
  justifyContent(value: FlexAlign): RowAttribute;
}

• alignItems：参数类型为 VerticalAlign ，表示子组件在竖直方向上的布局方式， VerticalAlign 定义了以下三种对其方式：

  • Top：设置子组件在竖直方向上居顶部对齐。
  • Center（默认值）：设置子组件在竖直方向上居中对其。
  • Bottom：设置子组件在竖直方向上居底部对齐。

简单样例如下所示：

    Row() {
      Text("Top")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Top)    // 设置子组件在竖直方向顶部对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)

    Row() {
      Text("Center")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Center) // 设置子组件在竖直方向居中对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)

    Row() {
      Text("Bottom")
        .fontSize(26)
        .backgroundColor("#aabbcc")
    }
    .alignItems(VerticalAlign.Bottom) // 设置子组件在竖直方向底部对齐
    .borderWidth(2)
    .borderColor(Color.Pink)
    .width('100%')
    .height(60)

样例运行结果如下图所示：

• justifyContent：设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：

  • Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
  • Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
  • End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
  • SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
  • SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
  • SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

简单样例如下所示：

   @Entry @Component struct RowTest {

     build() {
       Column({space: 10}) {
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.Start)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.Center)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.End)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.SpaceBetween)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.SpaceAround)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
         Row() {
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#aabbcc')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#bbccaa')
           Text()
             .size({width: 90, height: 50})
             .backgroundColor('#ccaabb')
         }
         .justifyContent(FlexAlign.SpaceEvenly)
         .size({width: "100%", height: 90})
         .borderWidth(2)
         .borderColor(Color.Pink)
       }
       .padding(10)
       .size({width: "100%", height: '100%'})
     }
   }

样例运行结果如下图所示：

📢：如果 Row 设置了 space 参数，则 justifyContent 参数不起作用。

Column

Column 按照竖直方向布局子组件，主轴为竖直方向，纵轴为水平方向。

Column定义介绍

interface ColumnInterface {
  (value?: { space?: string | number }): ColumnAttribute;
}

• value：可选参数， space 表示设置 Column 的子组件在竖直方向上的间距，参数和 Row 一样，读者可类比 Row 来理解，具体用法就不再介绍了。

Column属性介绍

declare class ColumnAttribute extends CommonMethod<ColumnAttribute> {
  alignItems(value: HorizontalAlign): ColumnAttribute;
  justifyContent(value: FlexAlign): ColumnAttribute;
}

• alignItems：设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：

  • Start：设置子组件在水平方向上按照语言方向起始端对齐。
  • Center（默认值）：设置子组件在水平方向上居左对齐。
  • End：设置子组件在水平方向上按照语言方向末端对齐。

简单样例如下图所示：

    Column() {
      Text("Start")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.Start)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)

    Column() {
      Text("Center")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.Center)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)

    Column() {
      Text("End")
        .fontSize(22)
        .backgroundColor('#aabbcc')
    }
    .alignItems(HorizontalAlign.End)
    .size({width: "100%", height: 60})
    .borderWidth(2)
    .borderColor(Color.Pink)

样例运行结果如下图所示：

• justifyContent：设置子组件在竖直方向上的对齐方式， FlexAlign 定义了一下几种类型：

  • Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
  • Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
  • End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
  • SpaceBetween：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
  • SpaceAround：元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
  • SpaceEvenly：元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

简单样例如下所示：

    @Entry @Component struct ColumnTest {

      build() {
        Column({space: 5}) {
          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Start)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceAround)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceBetween)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.End)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

          Column() {
            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#aabbcc')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#bbccaa')

            Text()
              .size({width: 160, height: 25})
              .backgroundColor('#ccaabb')
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceEvenly)
          .size({width: "100%", height: 120})
          .borderWidth(2)
          .borderColor(Color.Pink)

        }
        .padding(10)
        .size({width: "100%", height: '100%'})
      }
    }

样例运行结果如下图所示：

📢：如果 Column 设置了 space 参数，则 justifyContent 参数不起作用。

Blank

Blank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。

#5.1.4.1：Blank定义介绍

interface BlankInterface {
  (min?: number | string): BlankAttribute;
}

• min： Blank 组件在容器主轴上的最小尺寸。

Blank属性介绍

declare class BlankAttribute extends CommonMethod<BlankAttribute> {
  color(value: ResourceColor): BlankAttribute;
}

• color：设置空白填充的填充颜色。

Blank 组件简单样例如下所示：

@Entry @Component struct Index {
  build() {
    Column({space: 10}) {
      Row() {
        Text('Bluetooth').fontSize(18)      // 靠左显示
        Blank()                             // 铺满剩余尺寸
        Toggle({ type: ToggleType.Switch }) // 靠右显示
      }
      .width('100%')
      .backgroundColor(Color.Pink)
      .borderRadius(15)
      .padding({ left: 10})
    }
    .padding(10)
    .size({ width: "100%", height: '100%' })
  }
}

样例运行结果如下图所示：

📢： Blank 具有以下特性：

• 只在 Row 和 Column 中生效。
• 除了 color 外不支持通用属性。
• 只在 Row 和 Column 有剩余空间才生效。
• 适合用在多设备适配场景中。

小结

本节介绍了线性容器布局里的主轴和纵轴的概念以及 Column 和 Row 的使用方法，读者可以借助线性容器组件实现简单的UI布局了，最后主要注意的是 Column 和 Row 的 space 和 justifyContent 参数不能混用。

如果想更深入的学习 OpenHarmony 开发的内容，可以参考以下学习文档：

OpenHarmony 开发环境搭建：https://qr18.cn/CgxrRy

《OpenHarmony源码解析》：https://qr18.cn/CgxrRy

• 搭建开发环境
• Windows 开发环境的搭建
• Ubuntu 开发环境搭建
• Linux 与 Windows 之间的文件共享
• ……

系统架构分析：https://qr18.cn/CgxrRy

• 构建子系统
• 启动流程
• 子系统
• 分布式任务调度子系统
• 分布式通信子系统
• 驱动子系统
• ……

OpenHarmony 设备开发学习手册：https://qr18.cn/CgxrRy

OpenHarmony面试题（内含参考答案）：https://qr18.cn/CgxrRy