目 录

1. 前言
2. 线性布局概论
3. 主轴与交叉轴 (Main vs Cross Axis)
   • 3.1 MainAxisAlignment：主轴对齐逻辑
   • 3.2 CrossAxisAlignment：交叉轴对齐逻辑
4. 弹性伸缩：Expanded 与 Flexible
5. Row & Column 轴线逻辑流程图
6. 线性布局核心属性对比表
7. 鸿蒙实战：构建自适应导航与工具栏
8. 总结

---

前言

在 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 (列) 表现	常见用途
MainAxis	水平 (X 轴)	垂直 (Y 轴)	控制间距分布
CrossAxis	垂直 (Y 轴)	水平 (X 轴)	控制高度/宽度对齐
MainAxisSize	max (默认) 或 min	max (默认) 或 min	决定是否撑满父容器
伸缩控制	Expanded 水平拉伸	Expanded 垂直拉伸	列表自动填充、响应式宽度
对齐基准	baseline 解决文字高低不一	N/A (通常不适用)	图文混排

---

鸿蒙实战：构建自适应导航与工具栏

在适配鸿蒙系统时，线性布局无处不在：

1. 系统设置条目：使用 Row，左侧为图标，中间为 Expanded 包装的标题，右侧为箭头。
2. 底部 Tab 栏：使用 Row 配合 MainAxisAlignment.spaceAround 均匀排布按钮。
3. 详情页介绍：使用 Column 垂直堆叠标题、时间、内容。
4. 折叠屏适配：在 Mate X 展开态下，通过 Row 实现左右分栏；在收起态下，通过逻辑切换为 Column。

---

总结

Row 与 Column 是 Flutter 布局王国的基石。通过对主轴（MainAxis）与交叉轴（CrossAxis）的精细微调，我们能够构建出从简单列表到复杂仪表盘的所有线性结构。在 HarmonyOS NEXT 的多元生态中，深刻理解“弹性伸缩”的原理，能让你的应用在从小屏手表到大屏电视的所有终端上，依然保持结构严谨且极具弹性的视觉表现。

记住，线性布局的真谛在于管理“空间”。一个熟练的开发者，能像乐团指挥家一样，让每一个组件在轴线上找到最完美的节拍。在掌握了轴线的艺术后，下一篇我们将迎来布局领域的“空间折叠大师”——Stack (层叠布局)，学习如何让组件在三维空间内纵深重叠。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net