Flutter 零基础入门（二十）：常用布局 Widget（Row、Column、Expanded）

Flutter 零基础入门（二十）：常用布局 Widget（Row / Column / Expanded）

在上一篇中，我们已经理解了：

• Widget 树结构
• 父子 Widget 的关系
• BuildContext 的作用

从这一篇开始，我们正式进入 Flutter UI 的核心能力：

👉 布局（Layout）

而 Flutter 中最基础、最常用的布局组件，就是：

• Row
• Column
• Expanded

一、Flutter 布局的核心思想

在 Flutter 中，布局遵循一句非常重要的话：

父 Widget 决定子 Widget 的布局规则

子 Widget：

• 不能随意决定大小
• 必须服从父 Widget 的约束

理解这一点，后面所有布局问题都会迎刃而解。

二、Row：水平布局

1️⃣ Row 是什么？

Row 用来：

在水平方向排列多个 Widget

2️⃣ 最简单的 Row

Row(
children: [
Text('A'),
Text('B'),
Text('C'),
],
)

显示效果：

A B C

3️⃣ Row 的主轴与交叉轴

• 主轴：水平方向
• 交叉轴：垂直方向

📌 记忆口诀：

Row 横着排，主轴是横轴

4️⃣ mainAxisAlignment（主轴对齐）

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('A'),
Text('B'),
],
)

常见取值：

• start（默认）
• center
• end
• spaceBetween
• spaceAround
• spaceEvenly

5️⃣ crossAxisAlignment（交叉轴对齐）

Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('A'),
Text('B'),
],
)

控制垂直方向的对齐方式。

三、Column：垂直布局

1️⃣ Column 是什么？

Column 用来：

在垂直方向排列多个 Widget

2️⃣ 最简单的 Column

Column(
children: [
Text('A'),
Text('B'),
Text('C'),
],
)

显示效果：

A
B
C

3️⃣ Column 的主轴与交叉轴

• 主轴：垂直方向
• 交叉轴：水平方向

📌 记忆口诀：

Column 竖着排，主轴是竖轴

4️⃣ Column 的对齐规则

Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('A'),
Text('B'),
],
)

和 Row 用法完全一致，只是方向不同。

四、一个非常重要的错误：布局溢出

你可能已经见过这个错误：

A RenderFlex overflowed by XX pixels

最常见原因：

👉 Row / Column 中的子 Widget 超出了可用空间

错误示例

Row(
children: [
Text('很长很长很长很长很长的文字'),
Text('另一段文字'),
],
)

五、Expanded：解决空间分配问题（重点）

1️⃣ Expanded 是什么？

Expanded 用来：

让子 Widget 占用剩余可用空间

2️⃣ 基本用法

Row(
children: [
Expanded(
child: Text('左边'),
),
Text('右边'),
],
)

效果：

• 左边自动撑满剩余空间
• 右边按自身大小显示

3️⃣ 多个 Expanded：按比例分配

Row(
children: [
Expanded(
flex: 1,
child: Container(color: Colors.red),
),
Expanded(
flex: 2,
child: Container(color: Colors.blue),
),
],
)

比例是：

1 : 2

六、Expanded 的本质理解（非常重要）

Expanded 的真实含义是：

“我愿意被拉伸，占用父 Widget 分配给我的空间”

它只能用在：

• Row
• Column
• Flex

七、Expanded vs SizedBox

SizedBox(width: 100)

• 固定尺寸
• 不会自动适配

Expanded(child: …)

• 自适应
• 更灵活

📌 实战中：

优先用 Expanded，少写死宽高

八、一个完整布局示例

Scaffold(
body: Column(
children: [
Container(
height: 100,
color: Colors.grey,
child: Center(child: Text('Header')),
),
Expanded(
child: Center(child: Text('Content')),
),
Container(
height: 50,
color: Colors.grey,
child: Center(child: Text('Footer')),
),
],
),
);

这是一个非常典型的页面结构。

九、新手常见误区总结

❌ 在 Row 中直接放超长 Text
❌ 滥用固定宽高
❌ 不理解主轴 / 交叉轴
❌ 忘记使用 Expanded

记住一句话：

Flutter 布局不是“摆控件”，而是“分配空间”

十、这一篇你真正学会了什么？

你已经掌握了：

• Row / Column 的本质
• 主轴与交叉轴
• Expanded 的作用
• 布局溢出的原因

你已经能写出：

结构清晰、不容易炸的 Flutter 页面布局

十一、总结

本篇你学会了：

• 水平布局 Row
• 垂直布局 Column
• 空间分配 Expanded
• 常见布局错误的解决方式

🔜 下一篇预告

《Flutter 零基础入门（二十一）：Container、Padding、Margin 与装饰》

下一篇我们将学习：

• Container 到底有多万能
• Padding 和 EdgeInsets
• margin 和 padding 的区别
• 背景色、圆角、边框

从下一篇开始：

你的页面将真正“好看起来” 🎨