【布局 widget】Flutter FittedBox

FittedBox 用来缩放 child 的大小，从而适应父容器的尺寸。FittedBox 给人的感觉是一看就懂，但实际上可能并没有真正理解，所以需要耐心理解每一句话的含意。

对于布局组件，我们按布局三板斧来研究。

1. 确定 child 的 constrains
2. 确定 自己的 大小
3. 摆放 child

确定 child 的 constrains

performLayout 的代码说明 child 的约束是从 0 到 infinity，相当于没有约束。

child!.layout(const BoxConstraints(), parentUsesSize: true);
复制代码

为什么要为 child 放开约束呢？是为了拿到 child 的真实 size。

FittedBox 的大小

如果是 tight 约束，决定 FittedBox 大小的只有 tight 约束，值为约束的最小值。

如果是 loose 约束，决定 Fittedbox 大小的有 loose 约束和 child size。约束的作用是提供边界，child 的作用是提供比例。

FittedBox 的 child 的 大小

把 child 的真实 size 根据 fit 参数进行缩放就得到了将要展现的 size，是 chid 的最终大小。

fit 是 BoxFit 枚举值，点开链接里面有图例。我复述一下适配逻辑。

1. fill：child 大小与 FittedBox 一样大，因为无视原来的宽高比，所以画面可能会被扭曲。
2. contain：child 尽可能的大，只要整体还在 FittedBox 之内。
3. cover：child 尽可能的小，只要能覆盖住 FittedBox。
4. fitWidth：保证宽能显示完整就行。
5. fitHeight：保证高能显示完整就行。
6. none：child 保持原来大小，无论是比 FittedBox 大还是比 FittedBox 小。
7. scaleDown:如果 FittedBox 放不下 child，策略同 contain,如果能放大，策略同 none。

从 1 到 5 都可能把 child 变大或变小。

7 只把 child 从大变小，但不会从小变大。

因为 child 的约束是无限，所以 child 可以无限超出 FittedBox。

摆放 child

如果要摆放 child ，FittedBox 必须和 child 的大小不一样。FittedBox size 大于或小于 chid size 的时候，根据 alignment 参数摆放 child。

触发缩放的条件

UnconstrainedBox(
   child: FittedBox(
       child: Text(
     'IAM17 Flutter 每日更新',
     style: TextStyle(fontSize: 100),
 );
复制代码

本例中，无论 fontSize 多大，都会原样显示，不会触发缩放，因为 child 的实际 size 和显示 size 相同。

所以 FittedBox 触发缩放的条件就是 child 的实际 size 和显示 size 不相同。

FittedBox 应用场景

FittedBox 给 child 的约束是无约束，如果 fit 参数再是 BoxFit.none 的话，那么 child 就被彻底放飞了。但是这样做的话，从可读性上来讲，不如 OverflowBox。

比较合适的场景是图片缩放，官方举的例子也是缩放图片，但是 Image widget 自带 fit 参数，可以自己缩放的。

其它的 widget 如果缩放大概率会影响美观，所以一时想不到理想的应用场景。如果缩放不是很大，对美观度影响不大，或者不在意美观的话，倒是可以一用。

保证文字在一行显示完整

FittedBox(
    child: Text('IAM17 IAM17 IAM17'),),
)));
复制代码

FittedBox 在布局的时候会把让 Text 在没有约束的情况下布局，所以 无论 text 有多长，都不会折行。

FittedBox 的 fit 默认值是  BoxFit.contain 会保证在约束范围内显示完整。