Flutter SizedBox布局组件Widget使用示例详解

Flutter Sizedbox 是一个 布局组件，用来给 child 添加 tight 约束的，也可以用来添加空白。

width，height是 Sizedbox 的参数

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);
}

enforce 方法根据 _additionalConstraints 返回一个新约束，新约束保证在参数 constraints 的范围之内。

child 的 constrains

constrains 是 tight ，SizedBox 透传 constrains 给 child。

constrains 是 loose，width 为空，SizedBox 透传 minWidth，maxWith 给 child；height为空，SizedBox 透传 minHeight，maxHeight 给 child。

constrains 是 loose，width 不为空， 在 constrains 范围内 给 child 的 width tight 约束；height 不为空 在 constrains 范围内 给 child 的 height tight 约束。

确定自己的大小

如果有 child ，和 child 一样大。

没有child ，constrains 是 tight ，大小为约束最小值。

没有child ，constrains 是 loose，在约束范围内由 width，height 参数指定。

SizedBox 的命名构造函数们

SizedBox 虽然本身很简单，但它命名构造函数确实不少。我们平时用的时候大多忽略了这些命名构造函数，所以应该先混个脸熟，用这些命名构造函数还是有好处的，可以增加代码的可读性。

SizedBox.expand

使 SizedBox 获得最大 Size，也就是和父 widget 一样大。

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

SizedBox.shrink

让 SizedBox 尽量小。

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

SizedBox.fromSize

通过 size 来构造 SizedBox。

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

SizedBox.square

保证 SizedBox 是一个正方形。

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

应用场景

为 child 提供 tight 约束。

当指定了 width，height 参数后，child 就获得了宽高的 tight 约束。保证 child 有固定大小。这对于固定布局非常有用。

为 children 之间提供空白。

可以用 padding 添加空白，但那样会增加一层嵌套，用 SizedBox 充当空白看起来更好一些。

占位

只是用来占位，比如 Spacer 中的 child 用的就是 SizedBox.shrink。

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(),
   );
 }
}

来源：https://juejin.cn/post/7167880704699662367