在鸿蒙 ArkTS 开发中，Row 和 Column 是最基础的布局组件，分别负责水平和垂直排列。掌握它们的使用是构建界面的关键。

一、水平布局：Row 组件

Row 组件将子元素横向排列，适合导航栏、按钮组等场景：

arkts

Row({ space: 10 }) {
  Text('左')
  Text('中').layoutWeight(1) // 占据剩余空间
  Text('右')
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')

关键属性：

• justifyContent：控制水平对齐方式

• space：子元素间距

• layoutWeight：子元素权重分配

二、垂直布局：Column 组件

Column 组件纵向排列子元素，适合列表、表单等：

arkts

Column({ space: 8 }) {
  Text('标题').fontSize(20)
  Text('内容').fontSize(14)
}
.padding(16)

主要属性：

• alignItems：控制水平对齐

• justifyContent：控制垂直分布

三、嵌套布局实践

通过嵌套实现复杂界面：

arkts

Column() {
  // 顶部栏
  Row() {
    Text('标题').layoutWeight(1)
    Button('操作')
  }
  .height(56)
  
  // 内容区
  Column() {
    // 卡片内容
  }
  .layoutWeight(1)
}
.height('100%')

四、实用技巧

1. 权重分配：用 layoutWeight 实现弹性布局

2. 对齐方式：灵活使用多种对齐选项

3. 间距控制：合理设置 spacing 提升可读性

4. 避免过深嵌套：超过三层考虑拆分组件

总结

Row 和 Column 是 ArkTS 布局的核心。掌握它们的属性组合和嵌套技巧，能够高效构建各种界面。记住：简单场景优先使用单一方向布局，复杂界面合理嵌套，保持代码清晰易维护。

加入刘洋老师的班级链接 https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type=1?ha_source=hmosclass&ha_sourceId=89000248