布局概览

Flutter 的布局系统基于约束（Constraints）模型。本文帮助你快速理解布局体系并选择合适的组件。

约束模型（重要）

每个 Widget 在布局时，父 Widget 会向下传递约束（最大/最小宽高），子 Widget 在约束范围内决定自己的尺寸，然后将尺寸信息向上返回。

父 Widget ──传递约束──► 子 Widget
父 Widget ◄──返回尺寸── 子 Widget

三条铁律：

1. Widget 只能在父 Widget 给定的约束范围内决定自身大小
2. 父 Widget 不能强制子 Widget 使用特定尺寸（只能给约束）
3. Widget 需要知道自己的尺寸才能定位子 Widget

布局组件速选表

按需求选组件

需求	推荐组件	文档
通用容器（背景、边框、内边距）	Container	详情
子组件水平排列	Row	详情
子组件垂直排列	Column	详情
子组件重叠放置	Stack	详情
子组件按比例分配空间	Expanded / Flexible	详情
居中显示	Center / Align	详情
设置内边距	Padding	详情
设置外边距	Container(margin:)	详情
设置固定尺寸	SizedBox	—
滚动列表	ListView	详情
网格布局	GridView	详情
流式换行	Wrap	详情
卡片	Card	—

按子组件数量分类

类型	说明	组件
单子组件	只能有一个 child	Container、Padding、Center、Align、SizedBox
多子组件	可以有多个 children	Row、Column、Stack、ListView、Wrap、GridView

各组件核心属性速查

Container — 组合容器

Container({
  AlignmentGeometry? alignment,       // 子组件对齐方式
  EdgeInsetsGeometry? padding,        // 内边距
  Color? color,                       // 背景色（与 decoration 互斥）
  Decoration? decoration,             // 装饰（边框、渐变、圆角、阴影等）
  Decoration? foregroundDecoration,   // 前景装饰
  double? width,                      // 宽度
  double? height,                     // 高度
  BoxConstraints? constraints,        // 额外约束（最小/最大宽高）
  EdgeInsetsGeometry? margin,         // 外边距
  Matrix4? transform,                 // 变换矩阵（旋转、缩放、平移）
  AlignmentGeometry? transformAlignment, // 变换原点对齐
  Widget? child,                      // 子组件
  Clip clipBehavior = Clip.none,      // 裁剪行为
})

Row / Column — 线性布局

Row/Column({
  MainAxisAlignment mainAxisAlignment,   // 主轴对齐（start/center/end/spaceBetween/spaceAround/spaceEvenly）
  CrossAxisAlignment crossAxisAlignment,  // 交叉轴对齐（start/center/end/stretch）
  MainAxisSize mainAxisSize,              // 主轴尺寸（max=撑满/min=包裹）
  VerticalDirection verticalDirection,     // 排列方向（down/up）
  List<Widget> children,                  // 子组件列表
})

Stack — 层叠布局

Stack({
  AlignmentGeometry alignment,    // 未定位子组件的对齐方式
  StackFit fit,                    // 未定位子组件的尺寸约束（loose/expand/passthrough）
  Clip clipBehavior,               // 裁剪行为
  List<Widget> children,           // 子组件列表（后面的绘制在上层）
})

Positioned({
  double? left,    // 距左边
  double? top,     // 距顶部
  double? right,   // 距右边
  double? bottom,  // 距底部
  double? width,   // 宽度
  double? height,  // 高度
  required Widget child,
})

Expanded / Flexible — 弹性布局

Expanded({ int flex = 1, required Widget child })  // 必须填满剩余空间

Flexible({
  int flex = 1,                    // 弹性系数
  FlexFit fit = FlexFit.loose,     // loose=可小于分配空间 / tight=必须填满
  required Widget child,
})

Padding — 内边距

Padding({
  required EdgeInsetsGeometry padding,  // 内边距（必填）
  required Widget child,                 // 子组件（必填）
})

// EdgeInsets 常用方法
EdgeInsets.all(16)                                    // 四周统一
EdgeInsets.symmetric(horizontal: 16, vertical: 8)   // 对称
EdgeInsets.only(left: 16, top: 8)                   // 指定方向
EdgeInsets.fromLTRB(8, 16, 8, 16)                   // 左上右下

Center / Align — 对齐

Center({ double? widthFactor, double? heightFactor, required Widget child })

Align({
  AlignmentGeometry alignment = Alignment.center,  // 对齐位置
  double? widthFactor,                               // 宽度因子（null=撑满，1.0=同子组件）
  double? heightFactor,                              // 高度因子
  required Widget child,
})

Wrap — 流式换行

Wrap({
  Axis direction = Axis.horizontal,       // 排列方向
  WrapAlignment alignment,                // 主轴对齐
  double spacing = 0.0,                   // 主轴间距
  WrapAlignment runAlignment,             // 交叉轴对齐
  double runSpacing = 0.0,                // 行间距
  WrapCrossAlignment crossAxisAlignment,  // 交叉轴子组件对齐
  List<Widget> children,                  // 子组件列表
})

ListView — 滚动列表

ListView({ scrollDirection, controller, physics, padding, itemExtent, children })
ListView.builder({ itemCount, itemBuilder, ... })         // 大数据量
ListView.separated({ itemCount, itemBuilder, separatorBuilder, ... })  // 带分隔符

GridView — 网格布局

GridView.count({ crossAxisCount, mainAxisSpacing, crossAxisSpacing, childAspectRatio, children })
GridView.extent({ maxCrossAxisExtent, ... })
GridView.builder({ gridDelegate, itemCount, itemBuilder, ... })

布局组件关系图

Container ← 最常用的组合容器
├── Padding      ← 内边距
├── DecoratedBox ← 背景装饰
├── ConstrainedBox ← 约束
├── Align        ← 对齐
├── Transform    ← 变换
└── child

布局排列
├── Row          ← 水平
├── Column       ← 垂直
├── Stack        ← 层叠
├── Wrap         ← 流式
└── Flex         ← Row/Column 的基类

弹性布局
├── Expanded     ← 占满剩余空间
└── Flexible     ← 可配置弹性系数

常见布局模式

居中一个组件

Center(child: Text('Hello'))
// 或
Align(alignment: Alignment.center, child: Text('Hello'))

固定大小盒子

SizedBox(
  width: 100,
  height: 100,
  child: Text('100x100'),
)

水平居中+固定宽度

Center(
  child: SizedBox(
    width: 200,
    child: Text('居中且宽度200'),
  ),
)

两端对齐（左+右）

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('左边'),
    Text('右边'),
  ],
)

卡片布局

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: [
        Text('标题', style: Theme.of(context).textTheme.titleMedium),
        const SizedBox(height: 8),
        Text('内容描述...'),
      ],
    ),
  ),
)

各组件详细文档

组件	说明
Container	组合容器，最常用的布局组件
Padding	内边距与外边距
Center / Align	对齐方式
Column	垂直布局
Row	水平布局
Stack	层叠布局
Expanded / Flexible	弹性布局
ListView	滚动列表
GridView	网格布局
Wrap	流式换行布局