Column 用于在竖直方向（主轴）上依次排列子组件，交叉轴为水平方向。

1 定义

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

• options.space：可选，设置子组件在主轴（竖直）方向上的间距，与 Row 中的 space 参数含义一致。

2 常用属性

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

• alignItems（交叉轴水平对齐）

  • HorizontalAlign.Start：根据语言方向起始端对齐
  • HorizontalAlign.Center（默认）：水平居中
  • HorizontalAlign.End：根据语言方向末端对齐

• justifyContent（主轴竖直分布）

  • FlexAlign.Start：首端对齐
  • FlexAlign.Center：居中分布
  • FlexAlign.End：尾端对齐
  • FlexAlign.SpaceBetween：两端对齐，间隔均分
  • FlexAlign.SpaceAround：间隔均分，首尾间隔为相邻间隔的一半
  • FlexAlign.SpaceEvenly：所有间隔相同

注意：如果为 Column 指定了 space 参数，则所有子项间距由 space 决定，此时 justifyContent 不生效。

3 示例

@Entry @Component
struct ColumnDemo {
  build() {
    Column({ space: 10 }) {
      // 交叉轴水平对齐示例
      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)

      // 主轴竖直分布示例
      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)
    }
    .padding(10)
    .size({ width: "100%", height: '100%' })
  }
}

@Entry @Component class ColumnDemo {

    func build() {
      Column(10) {
        // 交叉轴水平对齐示例
        Column() {
          Text("Start")
            .fontSize(22)
            .backgroundColor(0xaabbcc)
        }
        .alignItems(HorizontalAlign.Start)
        .size(width: 100.percent, height: 60.vp)
        .borderWidth(2)
        .borderColor(Color.Pink)

        Column() {
          Text("Center")
            .fontSize(22)
            .backgroundColor(0xaabbcc)
        }
        .alignItems(HorizontalAlign.Center)
        .size(width: 100.percent, height: 60.vp)
        .borderWidth(2)
        .borderColor(Color.Pink)

        Column() {
          Text("End")
            .fontSize(22)
            .backgroundColor(0xaabbcc)
        }
        .alignItems(HorizontalAlign.End)
        .size(width: 100.percent, height: 60.vp)
        .borderWidth(2)
        .borderColor(Color.Pink)

        // 主轴竖直分布示例
        Column() {
          Text("")
            .size(width: 160, height: 25)
            .backgroundColor(0xaabbcc)
          Text("")
            .size(width: 160, height: 25)
            .backgroundColor(0xbbccaa)
          Text("")
            .size(width: 160, height: 25)
            .backgroundColor(0xccaabb)
        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.SpaceAround)
        .size(width: 100.percent, height: 120.vp)
        .borderWidth(2)
        .borderColor(Color.Pink)
      }
      .padding(10)
      .size(width: 100.percent, height: 100.percent)
    }
}

以上即为 Column 组件的基本用法及对齐与分布示例，开发者可根据需求设置 space、alignItems 和 justifyContent，快速构建竖直方向的响应式布局。