欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第四十五个:FittedBox

程序员文章站 2022-05-30 18:30:48
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

当子组件的宽高比和父组件的宽高比不一样时,我们等比拉伸或者填充父组件,这时我们可以使用FittedBox,用法如下:

Container(
  height: 200,
  width: 200,
  color: Colors.green,
  child: FittedBox(
    child: Container(
      height: 50,
      width: 80,
      color: Colors.red,
    ),
  ),
)

效果如下:

《Flutter 控件大全》第四十五个:FittedBox

fit参数表示了子控件的填充方式,说明如下:

  • fill:填充父组件,宽高比发生变化。
  • contain:等比拉伸,但子控件不能超出父控件。
  • cover:尽可能的小,等比拉伸充满父控件。
  • fitWidth:等比拉伸,宽充满父控件。
  • fitHeight:等比拉伸,高充满父控件。
  • none:默认子控件居中,不做拉伸处理,超出父控件的部分裁剪。
  • scaleDown:在子控件为Image且缩小的情况和contain一样,否则和none一样。