前言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 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 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 开发的完整流程。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力