【布局 widget】Flutter FittedBox

356 阅读3分钟

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 会保证在约束范围内显示完整。