Flutter 常用布局组件

一、基础线性布局

组件	方向	特点
Row	水平	子组件水平排列
Column	垂直	子组件垂直排列
Flex	自定义	通过 direction 指定方向

---

二、空间分配与弹性布局

组件	作用
Expanded	强制填满剩余空间，可设置 flex 权重
Flexible	类似 Expanded 但可通过 fit 控制是否填满（如 Flexible.fit: loose）
Spacer	占据剩余空间（flex 默认为1）
AspectRatio	按固定宽高比约束子组件（如 16:9）

---

三、层叠与定位布局

组件	特点
Stack	子组件堆叠，配合 Positioned 精准定位
Align	按比例对齐（如 Alignment(0.5, 1.0) 表示底部中点）
Center	Align 的特例（等同于 Align(alignment: Alignment.center)）
OverflowBox	允许子组件突破父容器约束

---

四、尺寸约束类

组件	作用
SizedBox	固定尺寸盒子，也可用于占位（如 SizedBox(width: 20)）
ConstrainedBox	添加额外约束（如 BoxConstraints(minWidth: 100)）
FractionallySizedBox	按父容器比例设置尺寸（如 widthFactor: 0.5 占50%宽度）
IntrinsicWidth/Height	强制子组件按实际内容计算尺寸（性能代价高）

---

五、边距与装饰容器

组件	主要功能
Padding	内边距（padding: EdgeInsets.all(10)）
Container	全能容器（可设置 margin/padding/decoration/尺寸等）
DecoratedBox	纯装饰容器（背景/边框等，无 padding/margin）

---

六、流式布局

组件	特点
Wrap	自动换行，支持主轴/交叉轴对齐
Flow	高性能自定义流式布局（需实现 FlowDelegate）
ListView	可滚动的线性列表（本质是流式布局的特化版）
GridView	网格布局（GridView.count() / GridView.builder() 等）

---

七、表格与结构化布局

组件	用途
Table	固定行列表格（通过 TableRow 定义行）
DataTable	带标题和排序功能的高级表格
Wrap	模拟表格布局（结合 children 的固定宽度实现等宽效果）

---

八、响应式与适配布局

组件	功能
LayoutBuilder	动态获取父容器约束（常用于响应式设计）
MediaQuery	获取设备信息（屏幕尺寸/方向/像素密度等）
OrientationBuilder	根据横竖屏切换布局
SafeArea	避开刘海屏/状态栏等不安全区域

---

九、高级自定义布局

组件	说明
CustomSingleChildLayout	自定义单子组件布局（需实现 SingleChildLayoutDelegate）
CustomMultiChildLayout	自定义多子组件布局（需实现 MultiChildLayoutDelegate）
Transform	矩阵变换（平移/旋转/缩放）
Canvas + CustomPaint	直接绘制自定义图形（如曲线/图表）

---

十、辅助工具类

组件	用途
Divider	分割线（可设置粗细/颜色）
Baseline	按文本基线对齐（如 baseline: TextBaseline.alphabetic）
Opacity	透明度控制（非布局组件但常配合布局使用）
Visibility	控制显隐（保留组件占位空间）

---

选择建议

1. 简单排列：优先用 Row/Column + Expanded/Spacer
2. 层叠效果：Stack + Positioned
3. 响应式设计：LayoutBuilder + MediaQuery
4. 高性能列表：ListView.builder/GridView.builder
5. 复杂自定义：CustomMultiChildLayout 或直接绘制 Canvas

掌握这些组件的分类和特性，可以高效组合出任意复杂度的界面设计。