Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解

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

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！