目 录
- 前言
- 线性布局概论
- 主轴与交叉轴 (Main vs Cross Axis)
- [3.1 MainAxisAlignment：主轴对齐逻辑](#3.1 MainAxisAlignment：主轴对齐逻辑)
- [3.2 CrossAxisAlignment：交叉轴对齐逻辑](#3.2 CrossAxisAlignment：交叉轴对齐逻辑)
- [弹性伸缩：Expanded 与 Flexible](#弹性伸缩：Expanded 与 Flexible)
- [Row & Column 轴线逻辑流程图](#Row & Column 轴线逻辑流程图)
- 线性布局核心属性对比表
- 鸿蒙实战：构建自适应导航与工具栏
- 总结
前言
在 UI 布局的世界里，**"线性排列"**是最基础也最强大的排版方式。无论是鸿蒙系统的设置列表、底部导航栏，还是复杂的表单界面，其底层逻辑几乎都离不开水平方向（Horizontal）或垂直方向（Vertical）的堆叠。在 Flutter 适配 HarmonyOS NEXT 的过程中，面对华为 Mate 系列手机的修长屏幕以及 MatePad 的宽阔显示区域，如何精准掌控组件的排布节奏，是构建专业级应用的必修课。
Flutter 通过 Row 和 Column 这两位布局界的"双子星"，为开发者提供了一套极其直观的轴线控制模型。它们不仅能处理简单的组件堆叠，更能配合弹性因子（Flex）实现复杂的响应式空间分配。本文将带你深度剖析 Row 与 Column 的运行机制，探索主轴与交叉轴的对齐艺术，助你在鸿蒙全场景设备上排布出井然有序、极具美感的界面架构。
线性布局概论
Row 和 Column 都是多子布局（Multi-child layout）控件，它们都继承自 Flex。
- Row: 子组件沿水平方向（X 轴）排列。
- Column: 子组件沿垂直方向（Y 轴）排列。
它们的排布逻辑遵循 "约束向下，尺寸向上传递" 的原则，但由于具有"无限主轴长度"的倾向，在嵌套使用时需格外注意。
主轴与交叉轴 (Main vs Cross Axis)
理解这两个轴是掌握线性布局的唯一难点。
3.1 MainAxisAlignment：主轴对齐逻辑
主轴是指布局延伸的方向（Row 为水平，Column 为垂直）。
start: 靠头对齐。end: 靠尾对齐。center: 居中对齐。spaceBetween: 两端对齐，中间均分。spaceEvenly: 所有间隙均分（包括首尾）。
3.2 CrossAxisAlignment：交叉轴对齐逻辑
交叉轴是与主轴垂直的方向。
stretch: 让子组件在交叉轴方向填满父容器。baseline: 按文本基线对齐（常用于不同字号的文字对齐）。
弹性伸缩：Expanded 与 Flexible
在线性布局中，经常需要某个组件"占据剩余空间"。
Expanded: 强制占据剩余所有空间。Flexible: 允许占据剩余空间，但子组件可以不填满它。Spacer: 一个空白占位符，本质上是包装了Expanded的空盒子。
Row & Column 轴线逻辑流程图
下图展示了线性布局计算子组件位置的步骤：
是
否
Row/Column 开始布局
计算所有非弹性组件的尺寸
计算主轴剩余空间 R
是否有 Expanded/Flexible?
根据 flex 因子分配剩余空间 R
根据 MainAxisAlignment 分配剩余空间 R
子组件根据分配尺寸进行自适应
确定所有子组件的 X,Y 坐标
光栅化绘制
线性布局核心属性对比表
为了更加合理的说明内容，下表总结了布局参数的差异：
| 属性 | Row (行) 表现 | Column (列) 表现 | 常见用途 |
|---|---|---|---|
MainAxis |
水平 (X 轴) | 垂直 (Y 轴) | 控制间距分布 |
CrossAxis |
垂直 (Y 轴) | 水平 (X 轴) | 控制高度/宽度对齐 |
MainAxisSize |
max (默认) 或 min |
max (默认) 或 min |
决定是否撑满父容器 |
| 伸缩控制 | Expanded 水平拉伸 |
Expanded 垂直拉伸 |
列表自动填充、响应式宽度 |
| 对齐基准 | baseline 解决文字高低不一 |
N/A (通常不适用) | 图文混排 |
鸿蒙实战：构建自适应导航与工具栏
在适配鸿蒙系统时，线性布局无处不在：
- 系统设置条目 ：使用
Row，左侧为图标，中间为Expanded包装的标题，右侧为箭头。 - 底部 Tab 栏 ：使用
Row配合MainAxisAlignment.spaceAround均匀排布按钮。 - 详情页介绍 ：使用
Column垂直堆叠标题、时间、内容。 - 折叠屏适配 ：在 Mate X 展开态下，通过
Row实现左右分栏；在收起态下，通过逻辑切换为Column。
总结
Row 与 Column 是 Flutter 布局王国的基石。通过对主轴（MainAxis）与交叉轴（CrossAxis）的精细微调，我们能够构建出从简单列表到复杂仪表盘的所有线性结构。在 HarmonyOS NEXT 的多元生态中，深刻理解"弹性伸缩"的原理，能让你的应用在从小屏手表到大屏电视的所有终端上，依然保持结构严谨且极具弹性的视觉表现。
记住，线性布局的真谛在于管理"空间"。一个熟练的开发者，能像乐团指挥家一样，让每一个组件在轴线上找到最完美的节拍。在掌握了轴线的艺术后，下一篇我们将迎来布局领域的"空间折叠大师"------Stack (层叠布局)，学习如何让组件在三维空间内纵深重叠。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net