Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解
本文主要介绍flutter布局中的fittedbox、aspectratio、constrainedbox，详细介绍了其布局行为以及使用场景，并对源码进行了分析。
1. fittedbox
scales and positions its child within itself according to fit.
1.1 简介
按照其官方的介绍，它主要做了两件事情，缩放（scale）以及位置调整（position）。
fittedbox会在自己的尺寸范围内缩放并且调整child位置，使得child适合其尺寸。做过移动端的，可能会联想到imageview控件，它是将图片在其范围内，按照规则，进行缩放位置调整。fittedbox跟imageview是有些类似的，可以猜测出，它肯定有一个类似于scaletype的属性。
1.2 布局行为
fittedbox的布局行为还算简单，官方没有给出说明，我在这里简单说一下。由于fittedbox是一个容器，需要让其child在其范围内缩放，因此其布局行为分两种情况：
- 如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局；
- 如果没有外部约束条件，则跟child尺寸一致，指定的缩放以及位置属性将不起作用。
1.3 继承关系
object > diagnosticable > diagnosticabletree > widget > renderobjectwidget > singlechildrenderobjectwidget > fittedbox
从继承关系可以看出，fittedbox控件是一个基础控件。
1.4 示例代码
new container(
color: colors.amberaccent,
width: 300.0,
height: 300.0,
child: new fittedbox(
fit: boxfit.contain,
alignment: alignment.topleft,
child: new container(
color: colors.red,
child: new text("fittedbox"),
),
),
)
写了一个很简单的例子，加入container是为了加颜色显示两个区域，读者可以试着修改fit以及alignment查看其不同的效果。
1.5 源码解析
const fittedbox({
key key,
this.fit: boxfit.contain,
this.alignment: alignment.center,
widget child,
})
1.5.1 属性解析
fit：缩放的方式，默认的属性是boxfit.contain，child在fittedbox范围内，尽可能的大，但是不超出其尺寸。这里注意一点，contain是保持着child宽高比的大前提下，尽可能的填满，一般情况下，宽度或者高度达到最大值时，就会停止缩放。
alignment：对齐方式，默认的属性是alignment.center，居中显示child。
1.5.2 源码
构造函数如下：
@override
renderfittedbox createrenderobject(buildcontext context) {
return new renderfittedbox(
fit: fit,
alignment: alignment,
textdirection: directionality.of(context),
);
}
fittedbox具体实现是由renderfittedbox进行的。不知道读者有没有发现，目前的一些基础控件，继承自renderobjectwidget的，widget本身都只是存储了一些配置信息，真正的绘制渲染，则是由内部的createrenderobject所调用的renderobject去实现的。
renderfittedbox具体的布局代码如下：
if (child != null) {
child.layout(const boxconstraints(), parentusessize: true);
// 如果child不为null，则按照child的尺寸比率缩放child的尺寸
size = constraints.constrainsizeandattempttopreserveaspectratio(child.size);
_clearpaintdata();
} else {
// 如果child为null，则按照最小尺寸进行布局
size = constraints.smallest;
}
1.6 使用场景
fittedbox在目前的项目中还未用到过。对于需要缩放调整位置处理的，一般都是图片。笔者一般都是使用container中的decoration属性去实现相应的效果。对于其他控件需要缩放以及调整位置的，目前还没有遇到使用场景，大家只需要知道有这么一个控件，可以实现这个功能即可。
2. aspectratio
a widget that attempts to size the child to a specific aspect ratio.
2.1 简介
aspectratio的作用是调整child到设置的宽高比，这种控件在其他移动端平台上一般都不会提供，flutter之所以提供，我想最大的原因，可能就是自定义起来特别麻烦吧。
2.2 布局行为
aspectratio的布局行为分为两种情况：
- aspectratio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于boxfit中的contain，按照固定比率去尽量占满区域。
- 如果在满足所有限制条件过后无法找到一个可行的尺寸，aspectratio最终将会去优先适应布局限制条件，而忽略所设置的比率。
2.3 继承关系
object > diagnosticable > diagnosticabletree > widget > renderobjectwidget > singlechildrenderobjectwidget > aspectratio
从继承关系看，aspectratio是基础的布局控件。
2.4 示例代码
new container(
height: 200.0,
child: new aspectratio(
aspectratio: 1.5,
child: new container(
color: colors.red,
),
),
);
示例代码是定义了一个高度为200的区域，内部aspectratio比率设置为1.5，最终aspectratio的是宽300高200的一个区域。
2.5 源码解析
构造函数如下：
const aspectratio({
key key,
@required this.aspectratio,
widget child
})
构造函数只包含了一个aspectratio属性，其中aspectratio不能为null。
2.5.1 属性解析
aspectratio：aspectratio是宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，只是一个参考值。
2.5.2 源码
@override renderaspectratio createrenderobject(buildcontext context) => new renderaspectratio(aspectratio: aspectratio);
经过前面一些控件的解析，我想大家对这种构造应该不会再陌生了，绘制都是交由renderobject去完成的，这里则是由renderaspectratio去完成具体的绘制工作。
renderaspectratio的构造函数中会对aspectratio做一些检测（assert）
- aspectratio不能为null；
- aspectratio必须大于0；
- aspectratio必须是有限的。
接下来我们来看一下renderaspectratio的具体尺寸计算函数：
- 如果限制条件为istight，则返回最小的尺寸（constraints.smallest）；
if (constraints.istight) return constraints.smallest;
- 如果宽度为有限的值，则将高度设置为width / _aspectratio。 如果宽度为无限，则将高度设为最大高度，宽度设为height * _aspectratio；
if (width.isfinite) {
height = width / _aspectratio;
} else {
height = constraints.maxheight;
width = height * _aspectratio;
}
- 接下来则是在限制范围内调整宽高，总体思想则是宽度优先，大于最大值则设为最大值，小于最小值，则设为最小值。
如果宽度大于最大宽度，则将其设为最大宽度，高度设为width / _aspectratio；
if (width > constraints.maxwidth) {
width = constraints.maxwidth;
height = width / _aspectratio;
}
如果高度大于最大高度，则将其设为最大高度，宽度设为height * _aspectratio；
if (height > constraints.maxheight) {
height = constraints.maxheight;
width = height * _aspectratio;
}
如果宽度小于最小宽度，则将其设为最小宽度，高度设为width / _aspectratio；
if (width < constraints.minwidth) {
width = constraints.minwidth;
height = width / _aspectratio;
}
如果高度小于最小高度，则将其设为最小高度，宽度设为height * _aspectratio。
if (height < constraints.minheight) {
height = constraints.minheight;
width = height * _aspectratio;
}
2.6 使用场景
aspectratio适用于需要固定宽高比的情景下。笔者最近使用这个控件的场景是相机，相机的预览尺寸都是固定的几个值，因此不能随意去设置相机的显示区域，必须按照比率进行显示，否则会出现拉伸的情况。除此之外，倒是用的不多。
3. constrainedbox
a widget that imposes additional constraints on its child.
3.1 简介
这个控件的作用是添加额外的限制条件（constraints）到child上，本身挺简单的，可以被一些控件替换使用。flutter的布局控件体系，梳理着发现确实有点乱，感觉总体思想是缺啥就造啥，哈哈。
3.2 布局行为
constrainedbox的布局行为非常简单，取决于设置的限制条件，而关于父子节点的限制因素生效优先级，可以查看之前的文章，在这里就不做具体叙述了。
3.3 继承关系
object > diagnosticable > diagnosticabletree > widget > renderobjectwidget > singlechildrenderobjectwidget > constrainedbox
constrainedbox也是一个基础的布局控件。
3.4 示例代码
new constrainedbox(
constraints: const boxconstraints(
minwidth: 100.0,
minheight: 100.0,
maxwidth: 150.0,
maxheight: 150.0,
),
child: new container(
width: 200.0,
height: 200.0,
color: colors.red,
),
);
例子也挺简单的，在一个宽高200.0的container上添加一个约束最大最小宽高的constrainedbox，实际的显示中，则是一个宽高为150.0的区域。
3.5 源码解析
构造函数如下：
constrainedbox({
key key,
@required this.constraints,
widget child
})
包含了一个constraints属性，且不能为null。
3.5.1 属性解析
constraints：添加到child上的额外限制条件，其类型为boxconstraints。boxconstraints的作用是干啥的呢？其实很简单，就是限制各种最大最小宽高。说到这里插一句，double.infinity在widget布局的时候是合法的，也就说，例如想最大的扩展宽度，可以将宽度值设为double.infinity。
3.5.2 源码
@override
renderconstrainedbox createrenderobject(buildcontext context) {
return new renderconstrainedbox(additionalconstraints: constraints);
}
renderconstrainedbox实现其绘制。其具体的布局表现分两种情况：
- 如果child不为null，则将限制条件加在child上；
- 如果child为null，则会尽可能的缩小尺寸。
具体代码如下：
@override
void performlayout() {
if (child != null) {
child.layout(_additionalconstraints.enforce(constraints), parentusessize: true);
size = child.size;
} else {
size = _additionalconstraints.enforce(constraints).constrain(size.zero);
}
}
3.6 使用场景
需要添加额外的约束条件可以使用此控件，例如设置最小宽高，尽可能的占用区域等等。笔者在实际开发中使用的倒不是很多，倒不是说这个控件不好使用，而是好多约束因素是综合的，例如需要额外的设置margin、padding属性能，因此单独再套个这个就显得很繁琐了。
3.7 关于unconstrainedbox
这个控件不做详细介绍了，它跟constrainedbox相反，是不添加任何约束条件到child上，让child按照其原始的尺寸渲染。
很神奇是吧，我也觉得，其实它的作用就是给child一个尽可能大的空间，不加约束的让其显示。用处我暂时木有想到。只能说flutter生产widget很随性。
4. 后话
笔者建的一个flutter学习相关的项目，github地址，里面包含了笔者写的关于flutter学习相关的一些文章，会定期更新，也会上传一些学习demo，欢迎大家关注。