Flutter教學(xué)目錄持續(xù)更新中
Github源代碼持續(xù)更新中
1.SizedBox介紹
一個(gè)特定大小的盒子。這個(gè)widget給予子控件寬度和高度。如果寬度或高度為null，則此widget將調(diào)整自身大小以匹配子控件的大小。
2.SizedBox屬性
- width：寬
- height： 高
- child：
SizedBox尺寸調(diào)節(jié)：
- SizedBox沒有寬高約束，子控件有寬高約束，那么SizedBox會(huì)調(diào)節(jié)自己匹配子控件大小
- SizedBox有寬高約束，SizedBox子控件沒有寬高約束，SizedBox父控件無(wú)約束，那么SizedBox會(huì)將自己的約束條件給予SizedBox子控件
- SizedBox父控件有約束，那么約束會(huì)傳遞給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：
盡可能大的在父控件的約束內(nèi)顯示
Container(
margin: EdgeInsets.only(top: 10),
color: Colors.blue,
width: 50,
height: 50,
child: SizedBox.expand(
child: _myChild(),
),
),
4.SizedBox.shrink屬性
- child：
盡可能小的在父控件的約束內(nèi)顯示
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) ：從另一個(gè)Size復(fù)制尺寸
- Size.square(dimension)：正方形，dimension：邊長(zhǎng)
- Size.fromWidth(width)：指定寬度
- Size.fromHeight(height)：指定高度
- Size.fromRadius(radius)：指定半徑，結(jié)果一樣是正方形，Size.fromRadius(radius) = Size.square(2* radius)
image.png
下一節(jié)：Layout組件之Transform
