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 使用场景