一、引言：为什么需要理解 Column 布局

在鸿蒙原生应用开发中，布局是一切 UI 的基石。无论是简单的信息展示页面，还是复杂的表单交互流程，都离不开对布局容器的深入理解。

Column 是 ArkTS 中最基础、最常用的布局容器之一。它的作用是在垂直方向上依次排列子组件。这听起来很简单，但实际开发中，很多开发者对 alignItems 和 justifyContent 的理解存在偏差，导致 UI 表现与预期不符。

尤其是在 HarmonyOS NEXT 6.1.1（API 24）中，ArkTS 的布局系统做了多项改进和规范。Column 的 alignItems 方法参数类型从早期的 ItemAlign 变更为更精确的 HorizontalAlign，这一变化让不少从早期版本迁移的开发者感到困惑。

本文将通过一个完整的示例应用，深入剖析 Column + alignItems(HorizontalAlign.Start) + justifyContent 的组合用法，覆盖信息列表、表单页面、间距对比等常见场景，帮助开发者彻底掌握这一布局模式。

---

二、ArkTS 布局体系概览

2.1 三大基础容器

ArkTS 提供了三个基础布局容器，它们构成了所有复杂布局的基本单元：

容器	主轴方向	交叉轴方向	alignItems 参数类型	典型场景
Column	垂直（从上到下）	水平（从左到右）	HorizontalAlign	列表、表单、信息流
Row	水平（从左到右）	垂直（从上到下）	VerticalAlign	导航栏、按钮组、标签行
Stack	无（层叠）	无（层叠）	Alignment	悬浮按钮、遮罩层、卡片角标

理解主轴和交叉轴的概念是掌握布局的关键：

• 主轴（Main Axis）：容器排列子组件的方向。Column 的主轴是垂直方向。
• 交叉轴（Cross Axis）：与主轴垂直的方向。Column 的交叉轴是水平方向。
• alignItems：控制子组件在交叉轴上的对齐方式。
• justifyContent：控制子组件在主轴上的间距分布。

2.2 记不住怎么办？一个口诀

Column 竖直排，交叉是水平，alignItems 管水平，justifyContent 管竖直。
Row 水平排，交叉是竖直，alignItems 管竖直，justifyContent 管水平。

这个口诀对应着：

• Column().alignItems(HorizontalAlign.Start) — 所有子组件左对齐
• Row().alignItems(VerticalAlign.Center) — 所有子组件垂直居中

---

三、Column 容器核心概念

3.1 基本语法

Column() {
  // 子组件依次排列
  Text('第一行')
  Text('第二行')
  Text('第三行')
}
.width('100%')
.height('100%')

3.2 Column 构造函数参数

Column 可以接受一个可选的构造参数对象：

Column({ space: 12 }) {
  // 子组件之间间距为 12vp
}

参数	类型	说明
space	number	子组件之间的垂直间距（单位：vp）

3.3 常用属性链式方法

Column()
  .width('100%')                    // 宽度
  .height('100%')                   // 高度
  .alignItems(HorizontalAlign.Start) // 交叉轴（水平）对齐方式
  .justifyContent(FlexAlign.Start)   // 主轴（垂直）对齐方式
  .padding(16)                      // 内边距
  .backgroundColor(Color.White)     // 背景色
  .borderRadius(12)                 // 圆角
  .shadow({ radius: 4 })            // 阴影

---

四、alignItems —— 交叉轴对齐的精髓

4.1 三种对齐值

对于 Column，alignItems 接受 HorizontalAlign 枚举，控制子组件在水平方向上的对齐：

// 左对齐 —— 所有子组件从容器左侧开始排列
Column().alignItems(HorizontalAlign.Start)

// 水平居中 —— 所有子组件在水平方向居中
Column().alignItems(HorizontalAlign.Center)

// 右对齐 —— 所有子组件从容器右侧开始排列
Column().alignItems(HorizontalAlign.End)

4.2 直观对比

假设我们有三个宽度不同的子组件（宽度分别为 100vp、200vp、150vp），放在一个宽度为 300vp 的 Column 中：

HorizontalAlign.Start（左对齐）

┌────────────────────┐
│ [子组件A] 100vp      │
│ [子组件B 200vp]      │
│ [子组件C 150vp]      │
└────────────────────┘

HorizontalAlign.Center（水平居中）

┌────────────────────┐
│   [子组件A] 100vp    │
│  [子组件B 200vp]     │
│  [子组件C 150vp]     │
└────────────────────┘

HorizontalAlign.End（右对齐）

┌────────────────────┐
│      [子组件A] 100vp │
│      [子组件B 200vp] │
│      [子组件C 150vp] │
└────────────────────┘

4.3 注意事项

1. 子组件宽度未占满时效果明显：如果子组件的 width('100%') 占满容器宽度，三种对齐方式看起来没有区别。只有子组件宽度小于容器宽度时，对齐效果才能体现出来。
2. alignItems 不影响子组件自身尺寸：它只控制子组件在交叉轴上的位置，不会拉伸或压缩子组件。
3. 默认值：Column 的 alignItems 默认值是 HorizontalAlign.Center，这可能导致刚使用 Column 的开发者发现文本是居中而不是左对齐的，从而产生困惑。

---

五、justifyContent —— 主轴间距分布

5.1 五种分布方式

justifyContent 控制子组件在主轴（Column 的主轴是垂直方向）上的排列和间距分布：

// 默认：从起始位置开始排列
Column().justifyContent(FlexAlign.Start)

// 从结束位置开始排列
Column().justifyContent(FlexAlign.End)

// 居中排列
Column().justifyContent(FlexAlign.Center)

// 首尾两端对齐，元素之间间距相等
Column().justifyContent(FlexAlign.SpaceBetween)

// 每个元素两侧间距相等
Column().justifyContent(FlexAlign.SpaceAround)

// 所有间距（包括首尾）完全相等
Column().justifyContent(FlexAlign.SpaceEvenly)

5.2 三种间距分布的直观对比

假设有 3 个子组件在一个高度为 300vp 的 Column 中：

SpaceBetween — 首尾两端对齐

┌─────────────┐
│ [子组件 A]    │  ← 顶部
│              │
│ [子组件 B]    │
│              │
│ [子组件 C]    │  ← 底部
└─────────────┘

特点：A 在顶部，C 在底部，A-B 和 B-C 之间的间距相等。

SpaceAround — 每个元素两侧间距相等

┌─────────────┐
│              │  ← 顶部间距 = 间距 ÷ 2
│ [子组件 A]    │
│              │  ← 间距
│ [子组件 B]    │
│              │  ← 间距
│ [子组件 C]    │
│              │  ← 底部间距 = 间距 ÷ 2
└─────────────┘

特点：每个元素上下两侧的间距相等，首尾间距是中间间距的一半。

SpaceEvenly — 所有间距完全相等

┌─────────────┐
│              │  ← 间距
│ [子组件 A]    │
│              │  ← 间距
│ [子组件 B]    │
│              │  ← 间距
│ [子组件 C]    │
│              │  ← 间距
└─────────────┘

特点：所有间距（包括首尾）完全相等。

5.3 使用场景

分布方式	典型场景
Start	默认列表、信息流
Center	加载中动画、居中的空态页面
SpaceBetween	底部导航、验证码输入框
SpaceAround	图标工具栏
SpaceEvenly	登录注册页面、均匀分布的按钮组

---

六、场景一：基础对齐效果演示

6.1 需求分析

我们首先创建一个简单的演示页面，包含不同类型的文本和组件，直观展示 alignItems(HorizontalAlign.Start) 的效果。

即使子组件的宽度各不相同，所有子组件都严格保持左对齐。

6.2 代码实现

@Component
struct AlignDemo {
  build() {
    // ── Column 容器：垂直排列，子组件左对齐 ──
    Column() {
      // ① 短文本 — 左对齐
      Text('短文本')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)

      // ② 中等长度文本 — 同样左对齐
      Text('中等长度的文本内容用于演示对齐效果')
        .fontSize(16)

      // ③ 长文本 — 自动换行后仍保持左对齐
      Text('这是一段较长的文本，用于演示在 Column + alignItems.Start 布局下，'
          + '无论文本多长，所有子组件在水平方向上都保持左对齐的效果。')
        .fontSize(16)
        .lineHeight(24)

      // ④ 不同宽度的子组件 — 全部左对齐
      Row() {
        Text('⬤').fontSize(20).fontColor('#FF6200')
        Text('  固定宽度卡片').fontSize(16)
      }
      .width(200)       // 设置固定宽度
      .height(44)
      .backgroundColor('#FFF3E0')
      .borderRadius(8)

      Row() {
        Text('⬤').fontSize(20).fontColor('#FF6200')
        Text('  自适应宽度卡片').fontSize(16)
      }
      .width(260)       // 不同宽度
      .height(44)
      .backgroundColor('#FFF3E0')
      .borderRadius(8)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)   // ★ 核心：所有子组件左对齐
    .backgroundColor(Color.White)
    .borderRadius(CARD_RADIUS)
    .padding(SPACING_LARGE)
  }
}

6.3 运行效果解析

当这个组件渲染时，你会看到：

1. “短文本” — 三个字，自然左对齐
2. “中等长度的文本内容用于演示对齐效果” — 一行显示，左边缘与上面的"短文本"对齐
3. 长文本段落 — 自动换行后，每一行的左边缘都与上面的文本对齐
4. “固定宽度卡片”（宽 200vp） — 左边缘对齐
5. “自适应宽度卡片”（宽 260vp） — 左边缘对齐，但比上面的卡片更宽

关键观察点：所有子组件的左边缘在一条垂直线上，这就是 alignItems(HorizontalAlign.Start) 的效果。

6.4 如果改成 Center 或 End 会怎样？

如果将 .alignItems(HorizontalAlign.Start) 改为 .alignItems(HorizontalAlign.Center)：

• 短文本和中等文本因为宽度不同，中心点对齐，左边缘不在一条线上
• 长文本的每一行都居中显示
• 两个卡片也居中显示

改为 .alignItems(HorizontalAlign.End)：

• 所有子组件的右边缘在一条垂直线上

这就是为什么在通常的信息展示和表单场景中，我们使用 Start（左对齐）——它符合用户的阅读习惯，从左到右、从上到下。

6.5 技术要点

1. Text 组件的宽度自适应：如果没有显式设置宽度，Text 的宽度由文本内容决定。不同的文本长度导致不同的组件宽度，这时 alignItems 的效果最为明显。
2. Row 作为 Column 的子组件：Row 本身也是一个容器，它的宽度可以独立设置，不受 Column 的 alignItems 影响。
3. 嵌套容器的对齐独立：Column 的 alignItems 只直接影响它的直接子组件。如果子组件内部还有 Column 或 Row，它们的对齐方式需要单独设置。

---

七、场景二：信息流列表

7.1 需求分析

信息流列表是移动端最常见的 UI 模式之一：一组卡片垂直排列，每个卡片包含标题、摘要、标签和时间信息。所有卡片左对齐，卡片之间等间距。

这是 Column + alignItems(Start) 最典型的应用场景。

7.2 单个信息卡片组件

@Component
struct InfoFeedItem {
  /** 标题 */
  private title: string = '';
  /** 摘要 */
  private summary: string = '';
  /** 发布时间 */
  private time: string = '';
  /** 标签 */
  private tag: string = '';

  build() {
    // 每条信息使用 Column 左对齐排列
    Column() {
      // 标题行
      Text(this.title)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1A1A1A')

      // 摘要行
      Text(this.summary)
        .fontSize(14)
        .fontColor('#666666')
        .lineHeight(20)
        .margin({ top: 6 })

      // 底部：标签 + 时间，用 Row 水平排列
      Row() {
        Text(this.tag)
          .fontSize(12)
          .fontColor('#FFFFFF')
          .backgroundColor('#FF6200')
          .borderRadius(4)
          .padding({ left: 8, right: 8, top: 2, bottom: 2 })

        Text(this.time)
          .fontSize(12)
          .fontColor('#999999')
          .margin({ left: 10 })
      }
      .margin({ top: 8 })
      .alignItems(VerticalAlign.Center)   // Row 内部垂直居中
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)    // ★ Column 交叉轴=水平方向→左对齐
    .padding(SPACING_LARGE)
    .backgroundColor(Color.White)
    .borderRadius(CARD_RADIUS)
    .shadow({
      radius: 4,
      color: 'rgba(0,0,0,0.06)',
      offsetY: 2
    })
  }
}

7.3 列表容器组件

@Component
struct InfoFeedList {
  build() {
    // space 参数通过 Column 构造函数的参数传入
    Column({ space: ITEM_GAP }) {
      InfoFeedItem({
        title: 'HarmonyOS NEXT 正式发布',
        summary: '华为正式发布 HarmonyOS NEXT，标志着全栈自研操作系统的里程碑。系统底座全线自研，去掉了传统的 AOSP 代码。',
        time: '2 小时前',
        tag: '热门'
      })
      InfoFeedItem({
        title: 'ArkTS 布局最佳实践',
        summary: '本文总结了鸿蒙原生 ArkTS 中 Column、Row、Flex 等布局容器的使用技巧与性能优化建议。',
        time: '昨天',
        tag: '技术'
      })
      InfoFeedItem({
        title: '开发者大会 2024 回顾',
        summary: '华为开发者大会上展示了众多新特性，包括全新的 DevEco Studio、分布式应用框架等。',
        time: '3 天前',
        tag: '资讯'
      })
      InfoFeedItem({
        title: '鸿蒙生态应用数量突破 10 万',
        summary: '随着鸿蒙生态的快速发展，原生应用数量已突破 10 万大关，覆盖了用户日常使用的各个领域。',
        time: '1 周前',
        tag: '生态'
      })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)    // ★ 所有卡片左对齐
  }
}

7.4 布局架构分析

这个列表的布局层级如下：

Column (列容器，主轴=垂直)
├── InfoFeedItem (卡片1)
│   └── Column
│       ├── Text (标题)         ← HorizontalAlign.Start 左对齐
│       ├── Text (摘要)         ← 左对齐
│       └── Row (标签 + 时间)
│           ├── Text (标签)
│           └── Text (时间)
├── InfoFeedItem (卡片2)
│   └── Column
│       ├── Text (标题)         ← 左对齐
│       ├── Text (摘要)         ← 左对齐
│       └── Row (标签 + 时间)
│           └── ...
└── ...

每个层级都有明确的对齐职责：

• 外层 Column：所有卡片左对齐，垂直方向通过 { space: 10 } 控制间距
• 内层 Column（InfoFeedItem）：卡片内部元素左对齐
• 内层 Row（标签行）：标签和时间垂直居中

7.5 为什么需要两层 Column？

可能有读者会问：为什么不用一层 Column 直接排列所有 Text 和 Row？

答案在于视觉分组和样式隔离。每个信息卡片是一个独立的视觉单元，需要统一的外边距、背景色、圆角、阴影等样式。如果在一层 Column 中平铺所有元素：

1. 无法为每个"卡片"设置独立的背景色和圆角
2. 标题和摘要之间、摘要和标签行之间的间距需要手动计算
3. 无法单独给某个卡片添加阴影或边框

通过将每个卡片封装为独立的 @Component，我们获得了更好的代码组织和样式管理能力。

7.6 数据驱动的最佳实践

在实际项目中，信息列表的数据通常来自网络请求或本地数据库。推荐的做法是将数据定义为数组，通过 ForEach 循环渲染：

@Component
struct InfoFeedList {
  @State private feedList: FeedItem[] = [];

  aboutToAppear() {
    // 模拟数据加载
    this.feedList = [
      { id: '1', title: '...', summary: '...', time: '...', tag: '...' },
      // ...更多数据
    ];
  }

  build() {
    Column({ space: ITEM_GAP }) {
      ForEach(this.feedList, (item: FeedItem) => {
        InfoFeedItem({
          title: item.title,
          summary: item.summary,
          time: item.time,
          tag: item.tag
        })
      })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }
}

---

八、场景三：表单页面

8.1 需求分析

表单是另一个 Column + alignItems(Start) 的经典应用场景。一个典型的表单包含：

• 表单标题
• 分隔线
• 多个输入字段（标签 + 输入框）
• 提交按钮

所有内容左对齐，每个输入字段的标签在输入框上方。

8.2 代码实现

@Component
struct FormPage {
  build() {
    // ── Column：表单整体垂直排列，所有标签/输入左对齐 ──
    Column() {
      // 表单标题
      Text('用户信息登记')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1A1A1A')

      // 分隔线
      Divider()
        .height(1)
        .color('#F0F0F0')
        .margin({ top: 12, bottom: 8 })

      // 姓名
      Text('姓名')
        .fontSize(15)
        .fontColor('#333333')
        .margin({ top: 8 })
      TextInput({ placeholder: '请输入您的姓名' })
        .width('100%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)

      // 手机号
      Text('手机号码')
        .fontSize(15)
        .fontColor('#333333')
        .margin({ top: 12 })
      TextInput({ placeholder: '请输入手机号码' })
        .width('100%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)

      // 邮箱
      Text('电子邮箱')
        .fontSize(15)
        .fontColor('#333333')
        .margin({ top: 12 })
      TextInput({ placeholder: '请输入电子邮箱' })
        .width('100%')
        .height(40)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)

      // 备注
      Text('备注说明')
        .fontSize(15)
        .fontColor('#333333')
        .margin({ top: 12 })
      TextArea({ placeholder: '请输入备注信息（选填）' })
        .width('100%')
        .height(80)
        .backgroundColor('#F5F5F5')
        .borderRadius(8)

      // 提交按钮
      Button('提 交')
        .width('100%')
        .height(44)
        .backgroundColor('#FF6200')
        .borderRadius(22)
        .fontColor(Color.White)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .margin({ top: 24 })
        .onClick(() => {
          console.info('[ColumnStartPage] 表单提交按钮被点击');
        })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)    // ★ 所有表单元素左对齐
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }
}

8.3 表单布局要点

8.3.1 标签在输入框上方

这是 Column + alignItems(Start) 的天然优势。每个字段的标签（Text）和输入框（TextInput）作为上下关系的子组件，自然形成"标签在上、输入框在下"的布局。

8.3.2 输入框宽度占满

虽然 alignItems 是左对齐，但输入框通过 .width('100%') 占满容器宽度，确保用户在输入时有足够大的点击区域。

8.3.3 间距的控制

字段之间的间距通过 .margin({ top: value }) 实现。注意这里使用 margin 而不是在 Column 的构造函数中设置 space，因为字段内部（标签与输入框之间）的间距和字段之间的间距不同，需要更精细的控制。

间距策略：

• 标签与输入框之间：8vp（通过 Text('姓名').margin({ top: 8 }) 实现）
• 字段之间：12vp（通过 Text('手机号码').margin({ top: 12 }) 实现）
• 提交按钮上方：24vp（通过 Button.margin({ top: 24 }) 实现）

8.3.4 为什么不用 Grid 或 Flex？

对于简单的纵向表单，Column 是最直接、最可读的选择。Grid 更适合网格状布局，Flex 更适合需要灵活换行的场景。选择布局容器时，应遵循"够用就好"的原则：Column 能解决的问题，就不要引入更复杂的容器。

8.4 表单交互增强建议

虽然本文主要聚焦布局，但提几点表单交互的增强建议：

1. 键盘处理：当 TextInput 获取焦点时，使用 Scroll 包裹表单，确保输入框不被键盘遮挡。
2. 表单验证：为每个输入框添加 .onChange 事件监听，实时校验输入合法性。
3. 提交状态：提交按钮在点击后应显示加载状态，并禁用重复点击。

---

九、场景四：justifyContent 间距对比

9.1 需求分析

为了帮助开发者直观理解 justifyContent 三种间距分布方式的区别，我们创建一个对比演示组件。它使用三个相同高度的 Column 容器，每个容器中有三个相同大小的色块，分别应用 SpaceBetween、SpaceAround、SpaceEvenly。

9.2 辅助组件：色块

@Component
struct BoxItem {
  private color: string = '#FF6200';
  private label: string = '';

  build() {
    Row() {
      Text(this.label)
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
    }
    .width(56)
    .height(36)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(this.color)
    .borderRadius(8)
  }
}

9.3 对比演示组件

@Component
struct JustifyContentDemo {
  build() {
    Column() {
      // 标题
      Text('justifyContent 间距分布对比')
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor('#1A1A1A')
        .margin({ bottom: 12 })

      // ── SpaceBetween：首尾两端对齐 ──
      Text('① justifyContent(FlexAlign.SpaceBetween)')
        .fontSize(13)
        .fontColor('#FF6200')
        .fontWeight(FontWeight.Medium)
      Column() {
        BoxItem({ color: '#FF6200', label: 'A' })
        BoxItem({ color: '#FF8C42', label: 'B' })
        BoxItem({ color: '#FFB073', label: 'C' })
      }
      .width('100%')
      .height(160)
      .alignItems(HorizontalAlign.Start)          // Column→左对齐
      .justifyContent(FlexAlign.SpaceBetween)      // ★ 垂直方向首尾对齐
      .backgroundColor('#FFF8F0')
      .borderRadius(8)
      .padding(12)
      .margin({ bottom: 12 })

      // ── SpaceAround：每个元素两侧间距相等 ──
      Text('② justifyContent(FlexAlign.SpaceAround)')
        .fontSize(13)
        .fontColor('#FF6200')
        .fontWeight(FontWeight.Medium)
      Column() {
        BoxItem({ color: '#4CAF50', label: 'A' })
        BoxItem({ color: '#66BB6A', label: 'B' })
        BoxItem({ color: '#81C784', label: 'C' })
      }
      .width('100%')
      .height(160)
      .alignItems(HorizontalAlign.Start)          // Column→左对齐
      .justifyContent(FlexAlign.SpaceAround)       // ★ 每个元素两侧间距相等
      .backgroundColor('#F1F8E9')
      .borderRadius(8)
      .padding(12)
      .margin({ bottom: 12 })

      // ── SpaceEvenly：所有间距完全相等 ──
      Text('③ justifyContent(FlexAlign.SpaceEvenly)')
        .fontSize(13)
        .fontColor('#FF6200')
        .fontWeight(FontWeight.Medium)
      Column() {
        BoxItem({ color: '#2196F3', label: 'A' })
        BoxItem({ color: '#42A5F5', label: 'B' })
        BoxItem({ color: '#64B5F6', label: 'C' })
      }
      .width('100%')
      .height(160)
      .alignItems(HorizontalAlign.Start)          // Column→左对齐
      .justifyContent(FlexAlign.SpaceEvenly)       // ★ 所有间距完全相等
      .backgroundColor('#E3F2FD')
      .borderRadius(8)
      .padding(12)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
  }
}

9.4 关键观察点

运行这个组件时，建议关注以下细节：

1. SpaceBetween 区块：色块 A 紧贴顶部，色块 C 紧贴底部，B 在中间。A-B 和 B-C 之间的间距相等。
2. SpaceAround 区块：色块 A 上方和色块 C 下方各有一段空间，但比 A-B 和 B-C 之间的间距小一半。
3. SpaceEvenly 区块：色块 A 上方、A-B 之间、B-C 之间、色块 C 下方四个间距完全相等。

9.5 计算公式

假设容器高度为 H，子组件总高度为 S，子组件数量为 N：

分布方式	间距计算
SpaceBetween	间距 = (H - S) / (N - 1)，首尾不留白
SpaceAround	边缘间距 = (H - S) / (2N)，元素间距 = 2 × 边缘间距
SpaceEvenly	所有间距 = (H - S) / (N + 1)

---

十、完整页面整合

10.1 页面主入口

@Entry
@Component
struct ColumnStartPage {
  build() {
    // ── 最外层 Column：标题 + 可滚动的内容区域 ──
    Column() {
      // 页面标题栏
      Row() {
        // 返回按钮
        Row() {
          Text('←')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .width(36)
        .height(36)
        .justifyContent(FlexAlign.Center)
        .onClick(() => {
          router.back();
        })

        // 标题
        Text('ColumnStart 垂直排列')
          .fontSize(20)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
          .margin({ left: 8 })
      }
      .width('100%')
      .height(56)
      .padding({ left: 12, right: 12 })
      .alignItems(VerticalAlign.Center)           // Row→垂直居中
      .backgroundColor('#FF6200')

      // ── Scroll：内容可滚动，避免内容超屏 ──
      Scroll() {
        Column() {
          // ===== 章节一：布局说明 =====
          Text('┃  Column + alignItems(HorizontalAlign.Start) 布局演示')
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .fontColor('#FF6200')
            .margin({ top: 12, bottom: 6 })
          Text('所有子组件在水平方向上「左对齐」，垂直方向依次排列。'
              + '适用于：信息列表、表单、设置页等。')
            .fontSize(13)
            .fontColor('#888888')
            .lineHeight(20)
            .margin({ bottom: 12 })

          // ===== 场景一：基础对齐演示 =====
          Text('▎场景一：基础对齐效果')
            .fontSize(15)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ bottom: 8 })
          AlignDemo()

          // ===== 场景二：信息流列表 =====
          Text('▎场景二：信息流列表')
            .fontSize(15)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ top: 16, bottom: 8 })
          InfoFeedList()

          // ===== 场景三：表单页面 =====
          Text('▎场景三：表单页面')
            .fontSize(15)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ top: 16, bottom: 8 })
          FormPage()

          // ===== 场景四：justifyContent 对比 =====
          Text('▎场景四：justifyContent 间距分布对比')
            .fontSize(15)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333333')
            .margin({ top: 16, bottom: 8 })
          JustifyContentDemo()

          // ===== 底部留白 =====
          Blank()
            .height(40)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)    // ★ Scroll 内部所有内容左对齐
        .padding({ left: 12, right: 12 })
      }
      .width('100%')
      .layoutWeight(1)                         // Scroll 填满剩余高度
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)         // ★ 最外层也保持左对齐
    .backgroundColor('#F5F5F5')
  }
}

10.2 导航入口页面

为了让用户能进入演示页面，还需要一个主页提供导航入口：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('ArkTS 布局示例')
          .fontSize(22)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(64)
      .padding({ left: 20 })
      .alignItems(VerticalAlign.Center)
      .backgroundColor('#FF6200')

      // 布局示例列表
      Column() {
        Text('请选择要查看的布局示例：')
          .fontSize(15)
          .fontColor('#666666')
          .margin({ bottom: 16 })

        NavButton({
          title: 'ColumnStart 垂直排列',
          subtitle: 'Column + alignItems(ItemAlign.Start) — 信息列表 / 表单',
          icon: '⬇',
          onBtnClick: () => { router.pushUrl({ url: 'pages/ColumnStartPage' }); }
        })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
      .padding({ left: 20, right: 20, top: 24 })

      Blank()
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

@Component
struct NavButton {
  private title: string = '';
  private subtitle: string = '';
  private icon: string = '→';
  private onBtnClick?: () => void;

  build() {
    Row() {
      Text(this.icon)
        .fontSize(28)
        .fontColor('#FF6200')
        .margin({ right: 14 })

      Column() {
        Text(this.title)
          .fontSize(17)
          .fontWeight(FontWeight.Bold)
          .fontColor('#1A1A1A')

        Text(this.subtitle)
          .fontSize(13)
          .fontColor('#999999')
          .margin({ top: 4 })
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

      Text('>')
        .fontSize(20)
        .fontColor('#CCCCCC')
    }
    .width('100%')
    .height(72)
    .padding({ left: 16, right: 16 })
    .alignItems(VerticalAlign.Center)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .shadow({ radius: 4, color: 'rgba(0,0,0,0.04)', offsetY: 2 })
    .onClick(() => { this.onBtnClick?.(); })
  }
}

10.3 路由注册

在 entry/src/main/resources/base/profile/main_pages.json 中注册页面：

{
  "src": [
    "pages/Index",
    "pages/ColumnStartPage"
  ]
}

---

十一、常见错误与避坑指南

11.1 错误一：Column 使用了 ItemAlign

错误代码：

Column()
  .alignItems(ItemAlign.Start)  // ❌ 编译错误

错误信息：

Argument of type 'ItemAlign' is not assignable to parameter of type 'HorizontalAlign'

原因：在 HarmonyOS NEXT 6.1.1（API 24）中，Column 的 alignItems 方法接受 HorizontalAlign 类型，而不是 ItemAlign。ItemAlign 是 Flex 容器使用的枚举类型。

修复：

Column()
  .alignItems(HorizontalAlign.Start)  // ✅ 正确

记忆方法：Column 的交叉轴是水平方向，所以用 HorizontalAlign。

11.2 错误二：Row 使用了 ItemAlign

错误代码：

Row()
  .alignItems(ItemAlign.Center)  // ❌ 编译错误

错误信息：

Argument of type 'ItemAlign' is not assignable to parameter of type 'VerticalAlign'

修复：

Row()
  .alignItems(VerticalAlign.Center)  // ✅ 正确

记忆方法：Row 的交叉轴是垂直方向，所以用 VerticalAlign。

11.3 错误三：自定义组件使用保留属性名 onClick

错误代码：

@Component
struct NavButton {
  private onClick?: () => void;  // ❌ 'onClick' 是系统保留属性
}

错误信息：

Property 'onClick' in type 'NavButton' is not assignable to the same property in base type 'CustomComponent'

原因：@Component 装饰的结构体已经继承了 onClick 等系统事件属性，自定义属性不能与系统保留属性重名。

修复：

@Component
struct NavButton {
  private onBtnClick?: () => void;  // ✅ 使用自定义名称
}

11.4 错误四：Column 的 space 参数位置错误

不存在的链式调用：

Column()
  .space(12)     // ❌ space 不是 Column 的链式方法
  .spacing(12)   // ❌ spacing 也不是 Column 的链式方法

正确的做法是通过构造函数参数传入：

Column({ space: 12 })  // ✅ 构造函数参数

11.5 错误五：忘记设置 width(‘100%’)

Column 默认宽度是子组件中最大的宽度。如果子组件较小，Column 也不会占满父容器宽度，导致背景色看起来不对劲。

Column() {
  Text('短文本')
}
.backgroundColor('#F5F5F5')  // ⚠️ 背景色只覆盖文本宽度

修复：

Column() {
  Text('短文本')
}
.width('100%')                // ✅ 明确设置宽度
.backgroundColor('#F5F5F5')

11.6 错误六：alignItems 与 justifyContent 混淆

很多初学者把这两个方法弄混。记住：

• alignItems = 交叉轴对齐 = Column 时管水平方向
• justifyContent = 主轴间距分布 = Column 时管垂直方向

可以这样联想：

• align（对齐）→ 像部队列队，所有人对齐到某条线 → 交叉轴
• justify（调整）→ 像调整行间距 → 主轴

11.7 错误七：Column 嵌套层级过深

虽然 Column 可以无限嵌套，但过深的嵌套会影响布局性能和代码可读性。建议嵌套不超过 3~4 层。

当发现嵌套太深时，可以考虑：

1. 将深层嵌套提取为独立的 @Component
2. 使用更合适的容器替代（如 Stack、Flex）
3. 使用 Grid 替代多层 Column 嵌套

---

十二、总结与最佳实践

12.1 知识点回顾

1. Column 的主轴是垂直方向，交叉轴是水平方向
2. alignItems 接受 HorizontalAlign（Start / Center / End），控制水平对齐
3. justifyContent 接受 FlexAlign（Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly），控制垂直间距分布
4. Column 的默认 alignItems 是 HorizontalAlign.Center，初次使用时可能会发现文本不是左对齐的
5. Column 的子组件间距通过构造函数 { space: number } 设置
6. Row 的 alignItems 使用 VerticalAlign，不要与 Column 混淆

12.2 选择布局容器决策树

需要垂直排列？
├─ 是 → Column
└─ 需要水平排列？
    ├─ 是 → Row
    └─ 需要层叠？
        ├─ 是 → Stack
        └─ 需要网格？
            ├─ 是 → Grid
            └─ 需要灵活换行？
                ├─ 是 → Flex
                └─ Column 或 Row 嵌套

12.3 何时使用 Column + alignItems(Start)

场景	推荐度	原因
信息流列表	⭐⭐⭐⭐⭐	天然垂直排列，左对齐符合阅读习惯
表单页面	⭐⭐⭐⭐⭐	标签在上输入框在下，左对齐最自然
设置页面	⭐⭐⭐⭐⭐	条目垂直排列，图标和文本左对齐
评论区	⭐⭐⭐⭐⭐	头像、用户名、内容垂直排列
商品详情	⭐⭐⭐⭐	标题、价格、描述垂直排列
聊天记录	⭐⭐⭐⭐	时间、消息内容垂直排列，可能需要配合其它容器

12.4 代码规范建议

1. 常量提取：将常用的间距、圆角、颜色值提取为模块级常量，避免魔法数字。
2. 组件拆分：每个独立的功能单元（如信息卡片）封装为独立的 @Component。
3. 路由分离：每个页面单独注册路由，通过 router.pushUrl 导航。
4. 注释完备：在关键的布局属性处添加注释，说明为什么要这样设置。
5. 命名规范：自定义组件的属性不要与系统保留属性（如 onClick）重名。

12.5 性能优化建议

1. 避免不必要的 Column 嵌套：每个 Column 都是一个布局节点，嵌套越多计算量越大。
2. 使用 layoutWeight 分配剩余空间：比通过百分比计算更高效。
3. Scroll + Column 替代 List：对于固定数量（通常 < 20 个）的列表项，Scroll + Column 性能优于 List，因为不需要复用机制的开销。
4. 使用 @State 驱动数据更新：当数据变化时，ArkTS 会自动增量更新 UI，不需要手动刷新。

12.6 与其它框架的对比

概念	ArkTS（Column）	SwiftUI（VStack）	Jetpack Compose（Column）	Flutter（Column）
对齐方法	alignItems(HorizontalAlign.Start)	alignment(.leading)	horizontalAlignment(Alignment.Start)	crossAxisAlignment: CrossAxisAlignment.start
间距	Column({ space: 12 })	spacing(12)	verticalArrangement = Arrangement.spacedBy(12.dp)	mainAxisAlignment: MainAxisAlignment.spaceBetween
主轴分布	justifyContent(FlexAlign.SpaceBetween)	alignment: .top + spacer	verticalArrangement = Arrangement.SpaceBetween	mainAxisAlignment: MainAxisAlignment.spaceBetween

有经验的开发者可以看到，ArkTS Column 的设计与 Flutter 的 Column 最为相似（都有 space 构造函数参数），这可能是因为两者都受到了 W3C Flexbox 规范的影响。

12.7 面向未来的学习路径

掌握了 Column + alignItems(Start) 之后，建议继续学习：

1. Column + alignItems(Center) — 水平居中布局，用于加载态、空态页面
2. Row + alignItems(VerticalAlign.Center) — 导航栏、标签行
3. Column + justifyContent(SpaceBetween) — 底部固定按钮、全屏布局
4. Stack + Alignment — 悬浮按钮、角标、遮罩
5. Flex + FlexWrap.Wrap — 标签云、自适应网格
6. Grid — 九宫格、图片墙、不规则网格

12.8 写在最后

布局是 UI 开发的基础，而 Column 是布局基础中的基础。掌握了 Column 以及与之配套的 alignItems 和 justifyContent，你已经能够解决 80% 以上的日常布局需求。

在 HarmonyOS NEXT 6.1.1（API 24）中，ArkTS 的类型系统更加严格，这意味着更多的编译时检查和更少的运行时错误。虽然刚开始接触时可能会被各种类型错误困扰，但这恰恰是框架成熟的标志——在编写代码的阶段就暴露问题，而不是等到运行时才崩溃。

希望通过本文的详细讲解，你能彻底掌握 Column + alignItems(Start) 布局模式，在实际开发中游刃有余。下一篇文章我们将深入 Row 布局，敬请期待。

---

本文配套示例代码完整路径：entry/src/main/ets/pages/ColumnStartPage.ets
SDK 版本：HarmonyOS NEXT 6.1.1（API 24）