Column 是一个沿垂直方向布局的容器。

例如：

@Entry
@Component
export struct Index {
  build() {
    Column() {
      Text('1')
        .width(100)
        .height(50)
        .backgroundColor(Color.Pink)

      Text('2')
        .width(100)
        .height(50)
        .backgroundColor(Color.Pink)

      Text('3')
        .width(100)
        .height(50)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
  }
}

运行结果：

然后我们看到几个子组件挨在了一起。

主轴排列方式

如何把它们的分开呢？

使用 Column 的 justifyContent 属性可以指定子元素的排序方式。

Start

元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

示例：

Column() {
  Text('1')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('2')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('3')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceBetween)

运行结果：

默认的排列方式。

Center

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

接下来，将 justifyContent 的值设为 FlexAlign.Center。

运行结果：

End

元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。

接下来，将 justifyContent 的值设为 FlexAlign.End。

运行结果：

SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。

接下来，将 justifyContent 的值设为 FlexAlign.SpaceBetween。

运行结果：

SpaceAround

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

接下来，将 justifyContent 的值设为 FlexAlign.SpaceAround。

运行结果：

SpaceEvenly

Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

将 justifyContent 的值设为 FlexAlign.SpaceEvenly。

运行结果：

交叉轴排列方式

交叉轴方向上通过 alignItems 属性来设置。

Start

按照语言方向起始端对齐。

示例：

Column() {
  Text('1')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('2')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('3')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.alignItems(HorizontalAlign.Start)

运行结果：

Center

居中对齐，默认对齐方式。

将 alignItems 的值设为 HorizontalAlign.Center。

运行结果：

默认的对齐方式。

End

按照语言方向末端对齐。

将 alignItems 的值设为 HorizontalAlign.End。

运行结果：

space

除了设置主轴和交叉轴两个方向上的排列方式以外，我们还可以通过 space 参数来分割子组件。

例如，将 space 设置为 20vp，里面的子元素默认间隔为 20vp：

Column({ space: 20 }) {
  Text('1')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('2')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)

  Text('3')
    .width(100)
    .height(50)
    .backgroundColor(Color.Pink)
}
.width('100%')
.height('100%')

运行结果：

至此，Column 的内容就介绍完了。