ArkTS 对齐方式总结

一、Alignment 枚举（对齐方式）

1.1 基本对齐方式

对齐方式	说明	使用场景
Alignment.TopStart	顶部起始端对齐	左上角对齐
Alignment.Top	顶部居中对齐	顶部中心
Alignment.TopEnd	顶部末端对齐	右上角对齐
Alignment.Start	垂直居中，起始端对齐	左侧居中
Alignment.Center	水平垂直居中	正中心
Alignment.End	垂直居中，末端对齐	右侧居中
Alignment.BottomStart	底部起始端对齐	左下角对齐
Alignment.Bottom	底部居中对齐	底部中心
Alignment.BottomEnd	底部末端对齐	右下角对齐

1.2 九宫格示意图

TopStart        Top        TopEnd
   ┌─────────────────────────┐
   │ •           •         • │
   │                         │
Start│ •           •         • │End
   │                         │
   │ •           •         • │
   └─────────────────────────┘
BottomStart   Bottom   BottomEnd

二、常用容器组件的对齐属性

2.1 Stack 堆叠容器

Stack({ alignContent: Alignment.TopEnd }) {
  Text('内容1')
  Text('内容2')
}

特点：

• 子组件按照添加顺序依次堆叠
• alignContent 控制所有子组件的对齐方式
• 后添加的组件会覆盖在上层

2.2 Column 垂直布局

Column() {
  Text('item1')
  Text('item2')
}
.alignItems(HorizontalAlign.Start)  // 水平对齐
.justifyContent(FlexAlign.Center)   // 垂直对齐

HorizontalAlign（水平对齐）：

• HorizontalAlign.Start - 左对齐
• HorizontalAlign.Center - 居中对齐
• HorizontalAlign.End - 右对齐

FlexAlign（垂直排列）：

• FlexAlign.Start - 顶部对齐
• FlexAlign.Center - 居中对齐
• FlexAlign.End - 底部对齐
• FlexAlign.SpaceBetween - 两端对齐，中间等间距
• FlexAlign.SpaceAround - 每个元素周围等间距
• FlexAlign.SpaceEvenly - 元素间隔相等

2.3 Row 水平布局

Row() {
  Text('item1')
  Text('item2')
}
.alignItems(VerticalAlign.Top)     // 垂直对齐
.justifyContent(FlexAlign.Center)  // 水平对齐

VerticalAlign（垂直对齐）：

• VerticalAlign.Top - 顶部对齐
• VerticalAlign.Center - 居中对齐
• VerticalAlign.Bottom - 底部对齐

2.4 Flex 弹性布局

Flex({
  direction: FlexDirection.Row,     // 布局方向
  justifyContent: FlexAlign.Center, // 主轴对齐
  alignItems: ItemAlign.Center      // 交叉轴对齐
}) {
  Text('item1')
  Text('item2')
}

ItemAlign（交叉轴对齐）：

• ItemAlign.Auto - 自动
• ItemAlign.Start - 起始端对齐
• ItemAlign.Center - 居中对齐
• ItemAlign.End - 末端对齐
• ItemAlign.Stretch - 拉伸填充
• ItemAlign.Baseline - 基线对齐

三、单个组件的对齐属性

3.1 通用对齐属性

Text("示例文本")
  .width(200)
  .height(100)
  .textAlign(TextAlign.Center) // 文本对齐
  .align(Alignment.Center); // 组件在父容器中的对齐

3.2 TextAlign（文本对齐）

• TextAlign.Start - 文本左对齐
• TextAlign.Center - 文本居中
• TextAlign.End - 文本右对齐

四、实际应用示例

4.1 顶部右侧"跳过"按钮

Stack({ alignContent: Alignment.TopEnd }) {
  Image($r('app.media.ad'))
    .width('100%')
    .height('100%')

  Button('跳过')
    .margin(15)
}

4.2 登录页面居中布局

Column() {
  Image($r('app.media.logo'))
    .width(100)
    .height(100)

  TextInput({ placeholder: '请输入用户名' })
    .width('80%')
    .margin({ top: 20 })

  TextInput({ placeholder: '请输入密码' })
    .width('80%')
    .margin({ top: 10 })

  Button('登录')
    .width('80%')
    .margin({ top: 20 })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)  // 垂直居中
.alignItems(HorizontalAlign.Center) // 水平居中

4.3 底部导航栏

Row() {
  ForEach(['首页', '发现', '我的'], (item: string) => {
    Column() {
      Image($r('app.media.icon'))
        .width(24)
        .height(24)
      Text(item)
        .fontSize(12)
    }
    .layoutWeight(1)
    .alignItems(HorizontalAlign.Center)
  })
}
.width('100%')
.height(60)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)
.backgroundColor(Color.White)

4.4 卡片布局（左图右文）

Row() {
  Image($r('app.media.cover'))
    .width(80)
    .height(80)
    .borderRadius(8)

  Column() {
    Text('歌曲名称')
      .fontSize(16)
      .fontWeight(FontWeight.Bold)

    Text('歌手名称')
      .fontSize(14)
      .fontColor(Color.Gray)
      .margin({ top: 5 })
  }
  .margin({ left: 15 })
  .alignItems(HorizontalAlign.Start)
  .justifyContent(FlexAlign.Center)
  .layoutWeight(1)
}
.width('100%')
.padding(15)
.alignItems(VerticalAlign.Center)

五、重点注意事项

5.1 容器与子组件的关系

• Stack: 使用 alignContent 控制所有子组件对齐
• Column/Row: 使用 alignItems 和 justifyContent 分别控制交叉轴和主轴对齐
• 单个组件: 使用 .align() 控制在父容器中的位置

5.2 优先级规则

1. 子组件的 .align() 优先级 > 父容器的 alignContent
2. 使用 layoutWeight 的组件会自动填充剩余空间
3. position() 绝对定位会脱离正常布局流

5.3 常见组合

需求	实现方式
水平垂直居中	Column().justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
底部对齐	Column().justifyContent(FlexAlign.End)
两端对齐	Row().justifyContent(FlexAlign.SpaceBetween)
右上角定位	Stack({ alignContent: Alignment.TopEnd })
等分布局	使用 .layoutWeight(1)

六、调试技巧

// 添加边框查看实际布局范围
.border({ width: 1, color: Color.Red })

// 添加背景色区分不同区域
.backgroundColor('#FFE0E0E0')

// 查看占用空间
.width('100%')
.height('100%')

七、性能优化建议

1. 避免过度嵌套: 尽量使用 Flex 或 Row/Column 替代多层嵌套
2. 合理使用 layoutWeight: 代替固定宽度，提高响应式布局能力
3. 使用相对单位: 如 %、vp 而非固定像素
4. 避免频繁计算: 将对齐相关属性提前确定，避免在循环中计算

---

参考资源：

• HarmonyOS 官方文档 - 布局容器
• ArkTS 语法规范