Column 是 HarmonyOS ArkTS 中最基础、最核心的垂直线性布局容器，用于将子组件沿垂直方向（纵向）依次排列。所有子组件默认从上到下排布，支持设置间距、对齐方式、顺序反转等能力，是页面布局的首选容器之一。

• 排列方向：垂直方向（从上到下）
• 核心能力：子组件垂直排布、间距控制、水平/垂直对齐、顺序反转
• 适用场景：页面整体布局、表单、列表、内容组等

1. 接口定义

Column(value?: { space?: number | string | Resource })

参数说明

参数名	类型	是否必选	说明
space	number / string / Resource	否	设置子组件之间的垂直间距，默认无间距

2. 核心属性

2.1 alignItems：子组件水平对齐

控制子组件在水平方向的对齐方式（横向对齐）。

alignItems(value: HorizontalAlign)

可选值：

• HorizontalAlign.Start：左对齐（默认）
• HorizontalAlign.Center：水平居中
• HorizontalAlign.End：右对齐

2.2 justifyContent：子组件垂直对齐

控制子组件在垂直方向的分布对齐（纵向对齐）。

justifyContent(value: FlexAlign)

常用值：

• FlexAlign.Start：顶部对齐（默认）
• FlexAlign.Center：垂直居中
• FlexAlign.End：底部对齐
• FlexAlign.SpaceBetween：两端对齐，均分剩余空间
• FlexAlign.SpaceEvenly：所有子组件均匀分布

2.3 reverse：子组件顺序反转

是否将子组件倒序排列（从下往上）。

reverse(value: boolean)

• false：默认，从上到下
• true：反转，从下到上

3. 完整可运行示例

以下示例基于官方规范实现，可直接复制运行，覆盖 Column 全部核心用法：

@Entry
@Component
struct ColumnFullExample {
  build() {
    Scroll() {
      Column({ space: 12 }) {
        // 1. 基础 Column
        Text("1. 基础 Column（space=10）")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("90%")
        Column({ space: 10 }) {
          Block()
          Block()
          Block()
        }
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        // 2. alignItems 水平对齐
        Text("2. alignItems 水平对齐")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("90%")

        Text("Start（左对齐）")
        Column() {
          Block({ w: 150 })
        }
        .alignItems(HorizontalAlign.Start)
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        Text("Center（居中）")
        Column() {
          Block({ w: 150 })
        }
        .alignItems(HorizontalAlign.Center)
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        Text("End（右对齐）")
        Column() {
          Block({ w: 150 })
        }
        .alignItems(HorizontalAlign.End)
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        // 3. justifyContent 垂直对齐
        Text("3. justifyContent 垂直对齐")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("90%")

        Text("垂直居中")
        Column() {
          Block()
        }
        .height(100)
        .justifyContent(FlexAlign.Center)
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        Text("底部对齐")
        Column() {
          Block()
        }
        .height(100)
        .justifyContent(FlexAlign.End)
        .width("90%")
        .border({ width: 1, color: "#ccc" })

        // 4. reverse 倒序排列
        Text("4. reverse 反转排列")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("90%")
        Column({ space: 8 }) {
          Text("第一项").backgroundColor(0xAFEEEE)
          Text("第二项").backgroundColor(0x00FFFF)
          Text("第三项").backgroundColor(0x87CEEB)
        }
        .reverse(true)
        .width("90%")
        .border({ width: 1, color: "#ccc" })
        .padding(8)

        // 5. 组合效果
        Text("5. 组合演示")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("90%")
        Column({ space: 10 }) {
          Block({ w: 120, color: 0xAFEEEE })
          Block({ w: 120, color: 0x00FFFF })
        }
        .width("90%")
        .height(280)
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.SpaceEvenly)
        .border({ width: 1, color: "#ccc" })
      }
      .width("100%")
      .padding(15)
    }
  }
}

// 辅助色块组件
@Component
struct Block {
  private w?: Length = "70%"
  private color?: number = 0xAFEEEE

  build() {
    Column()
      .width(this.w)
      .height(40)
      .backgroundColor(this.color)
      .borderRadius(6)
  }
}

运行效果如图：

4. 场景化使用说明

4.1 基础布局（默认排布）

直接使用 Column 包裹子组件，实现从上到下的默认排列，可通过 space 设置统一间距。

4.2 水平对齐控制

使用 alignItems 控制子组件在水平方向的位置，常用于表单、标题、按钮布局。

4.3 垂直对齐控制

使用 justifyContent 控制子组件在垂直方向的分布，必须给 Column 设置固定高度才能生效。

4.4 倒序排列

使用 reverse(true) 实现子组件从下往上排列，适用于聊天列表、消息流等场景。

4.5 组合高级布局

将 space + alignItems + justifyContent 组合使用，可实现居中卡片、均匀分布、两端对齐等复杂布局。

总结

1. 排列方向固定：Column 只能垂直排列子组件，水平排列请使用 Row。
2. 高度必须明确：使用 justifyContent 时，必须给 Column 设置明确高度，否则不生效。
3. 嵌套使用：Column 支持无限嵌套，可实现复杂页面结构。
4. 适配场景：推荐作为页面根容器，配合 Scroll 实现长列表滚动展示。

Column 是 HarmonyOS 开发中必须掌握的基础布局组件：

• 纵向排列，简单高效
• 支持间距、双方向对齐、顺序反转
• 适配绝大多数页面布局场景
• 配合 Scroll、Row 可构建任何复杂界面

熟练使用 Column 是快速开发 HarmonyOS 应用的基础。

---

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！