flutter布局规则

一、Flutter 布局核心原则

1. 父传约束，子定大小：父组件告诉子组件最大/最小宽高，子组件在范围内决定自身大小。
2. 父组件大小 = 子组件大小 + 布局规则，大部分布局组件自身不固定大小。
3. 所有组件行为只分三类：可设置宽高、父随子变、子撑满父。

二、Row / Column 主轴大小规则（最重要）

1. 默认情况（不写 mainAxisSize）

• 主轴默认：MainAxisSize.max
• Row 宽度 / Column 高度 = 撑满父组件

2. 设置 mainAxisSize: MainAxisSize.min

• 主轴大小 = 刚好包裹所有子组件
• 父组件大小随子组件变化

3. 交叉轴规则（永远记住）

• Row 的高度、Column 的宽度 → 默认撑满父组件

三、哪些组件可以直接设置宽高？

以下组件支持 width / height ，能固定大小：

1. Container
2. SizedBox
3. ConstrainedBox
4. Image
5. FractionallySizedBox

Text、Icon、Row、Column、Center、Align 不能直接设置宽高，必须套外层容器。

四、哪些组件父随子变（收缩包裹）？

不设置宽高时，父组件大小 = 子组件大小：

1. Row（mainAxisSize: min）
2. Column（mainAxisSize: min）
3. Stack（无定位子组件）
4. Wrap
5. Text
6. Icon
7. Card
8. ListTile
9. Padding
10. Container（有子组件、无宽高）

五、哪些组件子撑满父（自动填满）？

不设置宽高时，子组件自动撑满父组件：

1. Center
2. Align
3. Expanded（必须在 Row/Column 内）
4. Flexible（必须在 Row/Column 内）
5. SizedBox（width: double.infinity）
6. Container（设置 color/decoration 时）
7. FractionallySizedBox

六、不设置宽高时，各组件大小如何确定？

1. 基础容器

• Container
• 有子组件 → 包裹子组件
• 无子组件 → 宽高=0
• 加颜色/装饰 → 撑满父
• SizedBox
• 不写宽高 → 宽高=0
• Padding
• 大小 = 子组件 + padding

2. 弹性布局

• Row
• 主轴：默认撑满父；min 则包裹子
• 交叉轴：撑满父
• Column
• 同上
• Expanded / Flexible
• 强制占满 Row/Column 剩余空间

3. 对齐组件

• Center → 撑满父，子居中
• Align → 撑满父，子按对齐方式摆放

4. 层叠布局

• Stack
• 无定位子组件 → 大小 = 最大子组件
• 有定位子组件 → 大小 = 父组件约束

5. 内容组件

• Text → 大小由文字内容决定
• Icon → 固定默认大小（24×24）

七、高频布局坑点（必看）

1. Row 里面直接放长文本会溢出

• 原因：Row 主轴无限，文本无限，冲突
• 解决：套 Expanded 或 Flexible

2. Container 不加 child 会看不见

• 原因：无 child 且无宽高 → 大小为 0

3. Expanded 只能放在 Row/Column/Flex 里

• 放别的地方直接报错

4. Stack 未定位子组件会撑满 Stack

• 想让它自适应 → 套 Center/Align/Container

八、一句话速记

1. 能设宽高：Container、SizedBox
2. 父随子变：Row(min)、Column(min)、Stack、Wrap、Text
3. 子撑满父：Center、Align、Expanded、Container(带颜色)
4. Row/Column 主轴：默认撑满父，min 才包裹