一、给子组件附加紧约束
SizedBox是一个单子元素布局组件,有 width,height 两个属性,可以给它的子组件传递紧约束,强制子组件的宽高等于 width,height 属性的值。
示例代码如下:
Container(
color: Colors.red.shade200,
child: const SizedBox(
width: 200,
height: 100,
child: FlutterLogo(
size: 200,
)));
运行效果如下:
可以看到,FlutterLogo图片的高度并不是设置的200,而是SizedBox的height值100。
二、特殊场景
- 如果SizedBox的父组件给它自身传递了紧约束,那么SizedBox的width,height紧约束就会失去效果,比如父组件如果是屏幕或者是另一个SizedBox的情况下。
- 如果SizedBox的宽或者高不设置的话,那么不设置的那条约束就会去匹配子组件的尺寸。
- 如果SizedBox,不设置child的情况下,如果设置了宽高,布局就会用空白显示,这个可以用在给其他组件加间隔使用。
- 如果SizedBox,不设置child的情况下,也没有设置宽高,它的width和height就会默认是0,屏幕什么都不会显示。
SizedOverflowBox
该组件跟 SizedBox 用法相同,不同的是SizedOverflowBox的尺寸可以超过其父组件。