ConstrainedBox和SizedBox

ConstrainedBox和SizedBox都是通过RenderConstrainedBox来渲染的。SizedBox只是ConstrainedBox一个定制,本节把他们放在一起讨论。

ConstrainedBox

ConstrainedBox用于对齐子widget添加额外的约束。例如,如果你想让子widget的最小高度是80像素,你可以使用const BoxConstraints(minHeight: 80.0)作为子widget的约束。

示例

我们先定义一个redBox,它是一个背景颜色为红色的盒子,不指定它的宽度和高度:

  1. Widget redBox=DecoratedBox(
  2. decoration: BoxDecoration(color: Colors.red),
  3. );

我们实现一个最小高度为50,宽度竟可能大的红色容器。

  1. ConstrainedBox(
  2. constraints: BoxConstraints(
  3. minWidth: double.infinity, //宽度尽可能大
  4. minHeight: 50.0 //最小高度为50像素
  5. ),
  6. child: Container(
  7. height: 5.0,
  8. child: redBox
  9. ),
  10. )

显示效果:

image-20180907150653572

可以看到,我们虽然将Container的高度设置为5像素,但是最终却是50像素,这正是ConstrainedBox的最小高度限制生效了。如果将Container的高度设置为80像素,那么最终红色区域的高度也会是80像素,因为在此示例中,ConstrainedBox只限制了最小高度,并未限制最大高度。

BoxConstraints

BoxConstraints用于设置限制条件,它的定义如下:

  1. const BoxConstraints({
  2. this.minWidth = 0.0, //最小宽度
  3. this.maxWidth = double.infinity, //最大宽度
  4. this.minHeight = 0.0, //最小高度
  5. this.maxHeight = double.infinity //最大高度
  6. })

BoxConstraints还定义了一些便捷的构造函数,用于快速生成特定限制规则的BoxConstraints,如BoxConstraints.tight(Size size),它可以生成给定大小的限制;const BoxConstraints.expand()可以生成一个尽可能大的用以填充另一个容器的BoxConstraints。除此之外还有一些其它的便捷函数,读者可以查看API文档。

SizedBox

SizedBox用于给子widget指定固定的宽高,如:

  1. SizedBox(
  2. width: 80.0,
  3. height: 80.0,
  4. child: redBox
  5. )

运行效果如下:

image-20180907162546222

实际上SizedBox和只是ConstrainedBox一个定制,上面代码等价于:

  1. ConstrainedBox(
  2. constraints: BoxConstraints.tightFor(width: 80.0,height: 80.0),
  3. child: redBox,
  4. )

BoxConstraints.tightFor(width: 80.0,height: 80.0)等价于:

  1. BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)

而实际上ConstrainedBox和SizedBox都是通过RenderConstrainedBox来渲染的,我们可以看到ConstrainedBox和SizedBox的createRenderObject()方法都返回的事一个RenderConstrainedBox对象:

  1. @override
  2. RenderConstrainedBox createRenderObject(BuildContext context) {
  3. return new RenderConstrainedBox(
  4. additionalConstraints: ...,
  5. );
  6. }

多重限制

如果某一个widget有多个父ConstrainedBox限制,那么最终会是哪个生效?我们看一个例子:

  1. ConstrainedBox(
  2. constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0), //父
  3. child: ConstrainedBox(
  4. constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
  5. child: redBox,
  6. )
  7. )

上面我们有父子两个ConstrainedBox,他们的限制条件不同,运行后效果如下:

image-20180910102020609

最终显示效果是宽90,高60,也就是说是子ConstrainedBox的minWidth生效,而minHeight是父ConstrainedBox生效。单凭这个例子,我们还总结不出什么规律,我们将上例中父子限制条件换一下:

  1. ConstrainedBox(
  2. constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
  3. child: ConstrainedBox(
  4. constraints: BoxConstraints(minWidth: 60.0, minHeight: 60.0),
  5. child: redBox,
  6. )
  7. )

image-20180910102020609

最终的显示效果仍然是90,高60,效果相同,但意义不同,因为此时minWidth生效的事父ConstrainedBox,而minHeight是子ConstrainedBox生效。

通过上面示例,我们发现有多重限制时,对于minWidth和minHeight来说,是取父子中相应数值较大的。实际上,只有这样才能保证父限制与子限制不冲突。

思考题:对于maxWidth和maxHeight,多重限制的策略是什么样的呢?

UnconstrainedBox

UnconstrainedBox不会对子Widget产生任何限制,它允许其子Widget按照其本身大小绘制。一般情况下,我们会很少直接使用此widget,但在”去除”多重限制的时候也许会有帮助,我们看一下面的代码:

  1. ConstrainedBox(
  2. constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
  3. child: UnconstrainedBox( //“去除”父级限制
  4. child: ConstrainedBox(
  5. constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
  6. child: redBox,
  7. ),
  8. )
  9. )

上面代码中,如果没有中间的UnconstrainedBox,那么根据上面所述的多重限制规则,那么最终将显示一个90×100的红色框。但是由于 UnconstrainedBox “去除”了父ConstrainedBox的限制,则最终会按照子ConstrainedBox的限制来绘制redBox,即90×20:

image-20180910105830808

但是,读者请注意,UnconstrainedBox对父限制的“去除”并非是真正的去除,上面例子中虽然红色区域大小是90×20,但上方仍然有80的空白空间。也就是说父限制的minHeight(100.0)仍然是生效的,只不过它不影响最终子元素的大小,但仍然还是占有相应的空间,读者可以此时的父ConstrainedBox作用的是子ConstrainedBox,而redBox只受子ConstrainedBox限制,这一点请读者务必注意。

那么有什么方法可以彻底去除父BoxConstraints的限制吗?答案是否定的!所以在此提示读者,在定义一个通用的widget时,如果对子widget指定限制时一定要注意,因为一旦指定限制条件,子widget如果要进行相关自定义大小时将可能非常困难,因为子widget在不更改父widget的代码的情况下无法彻底去除其限制条件。