鸿蒙应用开发UI基础第九节: 线性布局容器Column/Row核心讲解与实战演示

【学习目标】

• 理解布局概念，Column / Row 的布局原理，掌握主轴、交叉轴的核心概念；
  
• 熟练使用 justifyContent / alignItems 控制组件对齐方式；
  
• 掌握 spacing、padding、margin 在线性布局中的作用，熟悉margin失效原因及解决方案；
  
• 掌握线性布局嵌套技巧，避免布局过深导致性能问题；
  
• 理解 alignSelf + ItemAlign 枚举的用法，实现子组件差异化交叉轴对齐；
  

一、工程结构

本节创建新工程 ColumnRowApplication（基于鸿蒙 API 12+ / Stage 模型），用于编写和运行线性布局（Row/Column）相关演示代码，工程核心目录结构如下：

1. ColumnRowApplication
2. ├── AppScope
3. │   └── app.json5                  # 应用全局配置
4. ├── entry                          # 主模块目录
5. │   ├── src/main
6. │   │   ├── ets                    # ArkTS 代码目录
7. │   │   │   ├── entryability       # 应用入口能力（启动/生命周期管理）
8. │   │   │   ├── entrybackupability # 备份入口能力（可选）
9. │   │   │   └── pages              # 页面目录（所有演示页面）
10. │   │   │       ├── AlignSelfPage.ets       # 子组件差异化对齐（alignSelf + ItemAlign）
11. │   │   │       ├── ColumnFlexAlignPage.ets # Column 主轴对齐（justifyContent）
12. │   │   │       ├── ColumnItemAlignPage.ets # Column 交叉轴对齐（alignItems）
13. │   │   │       ├── Index.ets              # 主入口页面（演示跳转入口）
14. │   │   │       ├── MarginPage.ets          # margin 失效问题及解决方案
15. │   │   │       ├── RowFlexAlignPage.ets    # Row 主轴对齐（justifyContent）
16. │   │   │       ├── RowItemAlignPage.ets    # Row 交叉轴对齐（alignItems）
17. │   │   ├── resources              # 资源目录
18. │   │   │   └── base
19. │   │   │       ├── element        # 基础元素配置
20. │   │   │       │   ├── color.json          # 颜色资源
21. │   │   │       │   ├── float.json          # 浮点数值
22. │   │   │       │   └── string.json         # 字符串资源
23. │   │   │       ├── media          # 媒体资源
24. │   │   │       └── profile        # 设备适配配置
25. │   │   └── module.json5           # 模块配置
26. └── build-profile.json5            # 工程构建配置

复制代码

二、布局概述

组件按照布局规则有序排列，共同构成应用的完整页面。在ArkTS声明式UI体系中，所有页面均由自定义组件搭建，开发者需根据页面的视觉结构和适配需求，选择最合适的布局方式完成开发。
布局的核心作用是通过特定的容器组件或属性，精准控制页面中所有UI组件的尺寸大小和显示位置。为保证布局效果的一致性和适配性，实际开发中建议遵循以下流程：

• 确定页面骨架：梳理页面的整体布局结构（如“顶部导航+中间内容+底部操作”）；
  
• 拆解元素构成：分析每个区域内的元素类型、数量及排列关系；
  
• 选择布局方案：针对不同区域的需求，选用适配的布局容器/属性（如线性布局、弹性布局）控制元素的位置和大小。
  

鸿蒙常用布局分类：线性布局（Row、Column）、层叠布局（Stack）、弹性布局（Flex）、相对布局（RelativeContainer）、栅格布局（GridRow、GridCol）、选项卡（Tabs），后续会逐一讲解。

线性布局：最常用的核心布局之一

线性布局是ArkTS中使用频率最高的布局方式，其核心特征是将子组件沿单一固定方向依次排列，无默认换行行为。
1. 线性布局的两大核心组件

线性布局通过两个容器组件实现不同方向的排列，每个组件都有明确的“主轴”（即排列方向）：
[table][tr]组件名排列方向主轴定义直观效果[/tr][tr][td]Column[/td][td]垂直方向[/td][td]子组件从上到下排列，垂直方向为Column的主轴[/td][td]
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！