《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,
),
),
)
效果如下:
fit
参数表示了子控件的填充方式,说明如下:
- fill:填充父组件,宽高比发生变化。
- contain:等比拉伸,但子控件不能超出父控件。
- cover:尽可能的小,等比拉伸充满父控件。
- fitWidth:等比拉伸,宽充满父控件。
- fitHeight:等比拉伸,高充满父控件。
- none:默认子控件居中,不做拉伸处理,超出父控件的部分裁剪。
- scaleDown:在子控件为Image且缩小的情况和
contain
一样,否则和none
一样。
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper