前言
Column和Row是 ArkUI 中最基础、最常用的布局容器。掌握它们对齐方式、权重机制和嵌套技巧，是构建复杂 UI 的基础。本篇以小分享 App 的多个页面为例，深入讲解 Column 与 Row 的核心属性。详细 API 可参考 HarmonyOS Column 官方文档。
一、Column 与 Row 的本质
1.1 布局方向
Column 与 Row 的本质区别在于布局方向：
| 容器 | 方向 | 主轴 | 交叉轴 |
|---|---|---|---|
| Column | 垂直 | Y 轴（垂直） | X 轴（水平） |
| Row | 水平 | X 轴（水平） | Y 轴（垂直） |
1.2 主轴与交叉轴
主轴和交叉轴对齐属性如下：
| 对齐属性 | 作用 |
|---|---|
justifyContent(FlexAlign.X) | 主轴对齐 |
alignItems(HorizontalAlign.X)/VerticalAlign.X | 交叉轴对齐 |
二、Column 的对齐方式
2.1 justifyContent 主轴对齐
justifyContent控制 Column 中子元素的垂直对齐：
Column() { Text('A').fontSize(20) Text('B').fontSize(20) } .height(200) .justifyContent(FlexAlign.Center) // 垂直居中2.2 FlexAlign 五种取值
FlexAlign 五种取值如下：
| 取值 | 作用 |
|---|---|
FlexAlign.Start | 顶部对齐 |
FlexAlign.Center | 垂直居中 |
FlexAlign.End | 底部对齐 |
FlexAlign.SpaceBetween | 两端对齐，间距均匀 |
FlexAlign.SpaceAround | 每个元素四周间距相等 |
2.3 alignItems 交叉轴对齐
alignItems控制 Column 中子元素的水平对齐：
Column() { Text('A') Text('B') } .alignItems(HorizontalAlign.Start) // 左对齐2.4 HorizontalAlign 三种取值
HorizontalAlign 三种取值如下：
| 取值 | 作用 |
|---|---|
HorizontalAlign.Start | 左对齐 |
HorizontalAlign.Center | 水平居中 |
HorizontalAlign.End | 右对齐 |
三、Row 的对齐方式
3.1 Row 主轴对齐
Row 的justifyContent控制子元素的水平对齐：
Row() { Text('A') Text('B') } .width('100%') .justifyContent(FlexAlign.SpaceAround) // 水平分散3.2 Row 交叉轴对齐
Row 的alignItems控制子元素的垂直对齐：
Row() { Text('A').fontSize(20) Text('B').fontSize(14) } .alignItems(VerticalAlign.Center) // 垂直居中3.3 VerticalAlign 三种取值
VerticalAlign 三种取值如下：
| 取值 | 作用 |
|---|---|
VerticalAlign.Top | 顶部对齐 |
VerticalAlign.Center | 垂直居中 |
VerticalAlign.Bottom | 底部对齐 |
四、小分享 App 中的对齐实战
4.1 SplashPage 居中布局
SplashPage 使用justifyContent(FlexAlign.Center)实现垂直居中：
Column({ space: 24 }) { // App icon Text('小分享') Text('分享美好，连接世界') Text('一款强大而美观的分享工具') } .alignItems(HorizontalAlign.Center) .layoutWeight(1) .justifyContent(FlexAlign.Center)4.2 HomePage Header 横向布局
HomePage Header 使用layoutWeight(1)让左侧标题撑开：
Row() { Text('小分享') .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor('#1A1A1A') .layoutWeight(1) // 撑开剩余空间 Text('🔍') .fontSize(22) .margin({ right: 16 }) }4.3 六宫格分类导航
六宫格分类导航使用width('16.66%')实现六等分：
Row({ space: 0 }) { ForEach(this.categories, (item: CategoryItem, index: number) => { Column({ space: 6 }) { // ... } .width('16.66%') .alignItems(HorizontalAlign.Center) }) }五、layoutWeight 权重机制
5.1 layoutWeight 基本用法
layoutWeight用于在父容器中按权重分配剩余空间：
Row() { Text('左侧') .layoutWeight(1) // 占 1 份 Text('右侧') .layoutWeight(2) // 占 2 份 } .width('100%')布局结果：左侧占 1/3，右侧占 2/3。
5.2 混合 layoutWeight 与固定宽度
混合用法如下：
Row() { Text('固定宽度') .width(80) Text('撑开剩余空间') .layoutWeight(1) Text('固定宽度') .width(80) }5.3 layoutWeight 多个等分
多个等分场景如下：
Row() { Text('A').layoutWeight(1) Text('B').layoutWeight(1) Text('C').layoutWeight(1) } .width('100%')布局结果：A、B、C 各占 1/3 宽度。
六、嵌套布局技巧
6.1 Row + Column 嵌套
Row + Column 嵌套代码如下：
Row({ space: 12 }) { Column() { Text(item.icon) .fontSize(24) } .width(48) .height(48) .backgroundColor(item.bg) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) Column({ space: 4 }) { Text(item.title) .fontSize(16) Text(item.desc) .fontSize(12) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) } .width('100%') .padding({ left: 16, right: 16, top: 16, bottom: 16 })6.2 嵌套布局原则
嵌套布局原则如下：
- 由外到内：先布局最外层，再逐步向内
- 明确方向：每层先确定是 Column 还是 Row
- 统一对齐：每层选定一种对齐方式
- 避免过深嵌套：超过 3 层考虑抽取组件
提示：嵌套层级过深会导致性能下降，建议每层不超过 5 个子元素。
七、本篇核心知识点
7.1 Column 与 Row 关键属性
Column 与 Row 关键属性总结如下：
justifyContent(FlexAlign.X)：主轴对齐alignItems(HorizontalAlign.X)/VerticalAlign.X：交叉轴对齐layoutWeight(N)：权重分配剩余空间space：子元素间距
7.2 实战开发要点
实战开发中需要重点关注以下几个要点：
- 三段式架构用 Column + layoutWeight(1)
- Header 用 Row + layoutWeight(1)
- 嵌套不超过 3 层
- space 用于设置子元素间距
总结
本文详细讲解了 HarmonyOS ArkUI 中 Column 与 Row 两大布局容器的对齐方式、权重机制、嵌套技巧等核心知识点。下一篇我们将看 Scroll 组件实现可滚动内容区。
附录：完整实现细节
1. 核心 API 参考
| API | 作用 | 说明 |
|---|---|---|
| 本文涉及的核心 API | 功能实现 | 参见华为官方文档 |
2. 完整代码示例
// 核心功能代码 // 详见正文中的完整实现3. 常见问题排查
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 编译错误 | import 路径错误 | 检查路径和 API 版本 |
| 运行时异常 | 参数不合法 | 使用 try/catch 捕获 |
| 性能问题 | 主线程耗时操作 | 使用异步 API |
4. 最佳实践
- 错误处理完善，使用 try/catch 包裹
- 资源及时释放，避免内存泄漏
- 异步操作使用 async/await
- 权限配置完整，按需申请
5. 完整代码文件索引
| 文件路径 | 说明 |
|---|---|
| 本文涉及的代码文件 | 见正文 |
6. 实现要点总结
核心实现要点：
- API 的正确使用方法和参数说明
- 完整的代码实现流程
- 常见问题的排查方案
- 性能优化和安全建议
7. 总结
本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习，读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。
开发注意事项
1. API 版本兼容性
确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同，建议查阅官方文档确认。
2. 权限配置
根据功能需求配置相应的系统权限。权限在 module.json5 中声明，运行时通过 abilityAccessCtrl 申请。
3. 错误处理
所有异步操作使用 try/catch 包裹，确保异常不会导致应用崩溃。错误信息通过 hilog 输出，便于调试。
4. 资源释放
使用完毕后及时释放系统资源，避免内存泄漏。例如：文件操作后关闭文件句柄，数据库操作后关闭 ResultSet。
5. 性能优化
避免在主线程执行耗时操作，使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。
完整代码文件索引
| 文件路径 | 说明 |
|---|---|
| 本文涉及的代码文件 | 见正文 |
核心 API 参考
| API/组件 | 用途 | 文档链接 |
|---|---|---|
| 文中涉及的 API | 核心功能 | 华为官方文档 |
总结
本文详细讲解了小分享 App 中对应功能的完整实现，涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习，读者可以掌握 HarmonyOS 开发的完整流程。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
