1. SizedBox
与 Container 不同,SizedBox 是一个透明的盒子,不能为其设置样式(例如,背景颜色、边距、填充等)。如果为 SizedBox 指定特定大小,则该大小也将应用于其子小部件。否则,如果未指定 SizedBox 的宽度或为 null,则其子小部件的宽度将通过其自己的设置或等于 0(如果未设置)。随着高度也有类似的行为。
创建 SizedBox 所涉及的所有参数,例如宽度、高度、大小和子项都是可选的。
SizedBox 构造函数:
const SizedBox(
{Key key,
double width,
double height,
Widget child}
)
SizedBox.fromSize构造函数:
SizedBox.fromSize(
{Key key,
Widget child,
Size size}
)
SizedBox.expand构造函数:
const SizedBox.expand(
{Key key,
Widget child}
)
SizedBox.shrink构造函数:
const SizedBox.shrink(
{Key key,
Widget child}
)
如果通过宽度、高度或大小参数为 SizedBox 指定特定大小,则此大小也将应用于其子小部件。例如:将 ElevatedButton 放入 250x100 SizedBox。此大小也适用于 ElevatedButton:
SizedBox(
width: 250,
height: 100,
child: ElevatedButton(
child: Text("Button "),
onPressed: (){},
)
)
还可以通过 SizedBox.fromSize 构造函数创建 SizedBox 对象:
SizedBox.fromSize (
size: Size(250, 100),
child: ElevatedButton(
child: Text("Button"),
onPressed: (){},
)
)
示例:ElevatedButton 被设置为最小尺寸 200x200,但当放置在指定尺寸(例如 250x50)的 SizedBox 中时,它将遵循 SizedBox 的尺寸。
SizedBox (
width:250,
height: 50,
child: ElevatedButton(
child: Text("Button "),
onPressed: (){},
style: ElevatedButton.styleFrom(
shadowColor : Colors.redAccent,
elevation: 10,
minimumSize: Size(200, 200 )
)
)
)
示例代码效果:
比如:如果没有指定SizedBox的高度(或者为null),子widget的高度将由自己的设置决定,或者等于0(如果没有自己的设置)。
SizedBox (
width:250,
child: ElevatedButton(
child: Text("Button "),
onPressed: (){},
style: ElevatedButton.styleFrom(
shadowColor : Colors.redAccent,
elevation: 10,
minimumSize: Size(200, 200 )
)
)
)
示例代码:
例如:设置double.infinity
为SizedBox 的宽度,在父widget
的许可下,其宽度会尽可能大。
SizedBox (
width: double.infinity,
height: 50,
child: ElevatedButton(
child: Text("Button "),
onPressed: (){}
)
)
示例代码效果:
2. SizedBox.fromSize
SizedBox.fromSize 构造函数用于通过可选参数 size 创建具有指定大小的 SizedBox。
构造函数代码
SizedBox.fromSize(
{Key key,
Widget child,
Size size}
)
示例代码:
SizedBox.fromSize (
size: Size(250, 100),
child: ElevatedButton(
child: Text("Button "),
onPressed: (){},
)
)
3. SizedBox.expand
SizedBox.expand 构造函数用于创建一个宽度和高度为 double.infinity
的 SizedBox。这意味着在父小部件的许可下,SizedBox 的大小将尽可能大。
SizedBox.expand构造函数
const SizedBox.expand(
{Key key,
Widget child}
)
4. SizedBox.shrink
SizedBox.shrink 构造函数用于创建一个尺寸最小的 SizedBox,如其父小部件建议的那样。
SizedBox.shrink构造函数
const SizedBox.shrink(
{Key key,
Widget child}
)
在这个例子中,我们有一个由 SizedBox.shrink 构造函数创建的 SizedBox,它的父小部件 ConstrainedBox 被设置为 80x20 的最小尺寸。SizedBox 将缩小其大小以最适合父小部件的最小大小。
示例代码
ConstrainedBox(
constraints: new BoxConstraints( // Min: 80x20
minWidth: 80.0,
minHeight: 20.0
),
child: SizedBox.shrink(
child: ElevatedButton(
child: Text('Button'),
onPressed: () {},
),
)
)
显示效果如下: