Flutter教学目录持续更新中
Github源代码持续更新中
1.SizedBox介绍
一个特定大小的盒子。这个widget给予子控件宽度和高度。如果宽度或高度为null，则此widget将调整自身大小以匹配子控件的大小。
2.SizedBox属性
- width：宽
- height： 高
- child：
SizedBox尺寸调节：
- SizedBox没有宽高约束，子控件有宽高约束，那么SizedBox会调节自己匹配子控件大小
- SizedBox有宽高约束，SizedBox子控件没有宽高约束，SizedBox父控件无约束，那么SizedBox会将自己的约束条件给予SizedBox子控件
- SizedBox父控件有约束，那么约束会传递给SizedBox
_myChild() {
return DecoratedBox(decoration: BoxDecoration(color: Colors.red));
}
SizedBox(
child: Container(
width: 20,
height: 20,
child: _myChild(),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox(
width: 20,
height: 20,
child: _myChild(),
),
),
Container(
width: 20,
height: 20,
margin: EdgeInsets.only(top: 10),
child: SizedBox(
child: _myChild(),
),
),
3.SizedBox.expand属性
- child：
尽可能大的在父控件的约束内显示
Container(
margin: EdgeInsets.only(top: 10),
color: Colors.blue,
width: 50,
height: 50,
child: SizedBox.expand(
child: _myChild(),
),
),
4.SizedBox.shrink属性
- child：
尽可能小的在父控件的约束内显示
Container(
margin: EdgeInsets.only(top: 10),
color: Colors.blue,
constraints: BoxConstraints(
maxWidth: 100,
maxHeight: 100,
minWidth: 10,
minHeight: 10,
),
child: SizedBox.shrink(
child: _myChild(),
),
),
5.SizedBox.fromSize属性
- size：Size
- child：
以Size尺寸约束
_mySize() {
return Size(20, 20);
}
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox.fromSize(
size: _mySize(),
child: _myChild(),
),
),
6.最后我们顺便讲一下Size
- Size(width, height)：指定宽高
- Size.copy(size) ：从另一个Size复制尺寸
- Size.square(dimension)：正方形，dimension：边长
- Size.fromWidth(width)：指定宽度
- Size.fromHeight(height)：指定高度
- Size.fromRadius(radius)：指定半径，结果一样是正方形，Size.fromRadius(radius) = Size.square(2* radius)
image.png
下一节：Layout组件之Transform
