Flutter SizedBox 布局原理与命名构造函数详解

核心布局原理

SizedBox 的核心作用是为子组件（child）添加严格的宽高约束，或者在没有子组件时直接占据指定空间。其内部实现依赖 BoxConstraints 的逻辑判断，具体分为以下两个维度：

1. 处理子组件约束 (child's constraints)

SizedBox 会将自身的约束要求传递给子组件，具体行为取决于父级传入的约束类型（tight 或 loose）：

• 当约束为 tight 时：SizedBox 会原样透传该 tight 约束给 child。
• 当约束为 loose 且 width/height 未指定时：SizedBox 仅透传当前的 minWidth/maxWidth 和 minHeight/maxHeight。
• 当约束为 loose 且指定了宽或高时：SizedBox 在给定范围内，对指定的维度施加 tight 约束。

2. 确定自身大小 (Determine own size)

SizedBox 的最终尺寸由其参数和是否存在子组件共同决定：

• 有子组件时：尺寸与子组件保持一致。
• 无子组件且约束为 tight 时：尺寸等于约束的最小值。
• 无子组件且约束为 loose 时：由 width 和 height 参数显式指定。

从源码层面看，_additionalConstraints 方法构建了一个新的约束对象，并通过 enforce() 确保新约束在父约束范围内生效。

BoxConstraints get _additionalConstraints {
    return BoxConstraints.tightFor(width: width, height: height);
}
final BoxConstraints constraints = this.constraints;
if (child != null) {
  child!.layout(_additionalConstraints.enforce(constraints),
      parentUsesSize: true);
  size = child!.size;
} else {
  size = _additionalConstraints.enforce(constraints).constrain(Size.zero);
}

常用命名构造函数

虽然基础的 SizedBox 构造函数直观易懂，但官方提供的命名构造函数在特定场景下能极大提升语义清晰度：

SizedBox.expand

强制使 SizedBox 撑满其可用的最大尺寸空间，即宽和高均为无穷大（double.infinity）。常用于希望子组件填满剩余空间的场景。

const SizedBox.expand({ super.key, super.child })
    : width = double.infinity,
      height = double.infinity;

SizedBox.shrink

将 SizedBox 的尺寸收缩至最小（0.0 x 0.0），常用于需要移除所有占位符或作为 Spacer 的内部实现。

const SizedBox.shrink({ super.key, super.child })
    : width = 0.0,
      height = 0.0;

SizedBox.fromSize

直接从 Size 对象提取宽高进行初始化，适合动态尺寸管理的场景。

SizedBox.fromSize({ super.key, super.child, Size? size })
    : width = size?.width,
      height = size?.height;

SizedBox.square

保证 Widget 为正方形。传入的 dimension 同时赋值给 width 和 height，避免重复定义。

const SizedBox.square({super.key, super.child, double? dimension})
    : width = dimension,
      height = dimension;

典型应用场景

1. 控制固定尺寸

最基础的用法是配合 width 和 height 参数，确保子组件具有固定的大小，不受屏幕变化影响。

2. 提供空白间距

用于排列紧密的 Widget 之间创建间隔。相比使用 Padding 包裹一层 Container，直接使用 SizedBox 更为简洁且减少层级嵌套。

3. 占位与 Spacer 实现

在 FlexibleRow 或 Column 中，Spacer 实际上是在 Expanded 内嵌入了一个 SizedBox.shrink。这使得开发者无需手动计算空白像素即可利用 Flex 布局填充空白区域。

class Spacer extends StatelessWidget {
  const Spacer({super.key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0);
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}