缩放盒子

FittedBox

FittedBox会在自己的尺寸范围内缩放并且调整child位置,使得child适合其尺寸。做过移动端的童鞋可能会联想到ImageView控件,它是将图片在其范围内,按照规则,进行缩放位置调整。FittedBox跟ImageView是有些类似的,可以猜测出,它肯定有一个类似于ScaleType的属性。

定义:

const FittedBox({
  Key key,
  this.fit = BoxFit.contain, // 适配方式
  this.alignment = Alignment.center, // 对齐方式
  Widget child,
})

示例:

Container(
  color: Colors.amberAccent,
  width: 300.0,
  height: 300.0,
  child: new FittedBox(
    fit: BoxFit.fitWidth,
    alignment: Alignment.topLeft,
    child: new Container(
      color: Colors.red,
      child: new Text("FittedBox"),
    ),
  ),
)

主要是配置 fit 的值:

  • BoxFit.none 原样输出
  • BoxFit.fitWidth 适合宽度
  • BoxFit.fitHeight 适合高度
  • BoxFit.cover 以长边适配
  • BoxFit.contain 以短边适配

AspectRatio

AspectRatio的作用是调整child到设置的宽高比

AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展, widget的高度是由宽度和比率决定的

如果在满足所有限制条件过后无法找到一个可行的尺寸,AspectRatio最终将会去优先适应布局限制条件,而忽略所设置的比率

定义:

AspectRatio({
  Key key,
   this.aspectRatio,
  Widget child,
})

示例:

Container(
  width: 200.0,
  child: new AspectRatio(
    aspectRatio: 1.5,
    child: new Container(
      color: Colors.red
    ),
  ),
);

以上示例, 定义了一个高度为200的区域,内部AspectRatio比率设置为1.5,最终AspectRatio的是宽300高200的一个区域。

参考

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress