Flutter教學目錄持續更新中
Github源代碼持續更新中
1.SizedOverflowBox介紹
一個特定大小的widget，但是會將它的原始約束傳遞給子控件，它可能會溢出。
2.SizedOverflowBox屬性
- size：
- alignment = Alignment.center：
- child：
3.Alignment
- Alignment.topLeft = Alignment(-1.0, -1.0)：
- Alignment.topCenter = Alignment(0.0, -1.0)：
- Alignment.topRight = Alignment(1.0, -1.0)：
- Alignment.centerLeft = Alignment(-1.0, 0.0)：
- Alignment.center = Alignment(0.0, 0.0)：
- Alignment.centerRight = Alignment(1.0, 0.0)：
- Alignment.bottomLeft = Alignment(-1.0, 1.0)：
- Alignment.bottomCenter = Alignment(0.0, 1.0)：
- Alignment.bottomRight = Alignment(1.0, 1.0)：
- Alignment()
- Alignment.lerp()
關于Alignment之前已經介紹過了：Flutter（44）：Layout組件之Container
4.使用
image.png
Container(
color: Colors.blue,
child: SizedOverflowBox(
alignment: Alignment.topCenter,
size: Size(100, 50),
child: Container(
width: 50,
height: 80,
color: Colors.amber,
),
),
),
5.OverflowBox與SizedOverflowBox的區別
不了解OverflowBox可以看一下：Flutter（56）：Layout組件之OverflowBox
- OverflowBox自己是沒有寬高的，SizedOverflowBox是有的，尺寸就是size所設置的，下面這個例子就可以看得出來，SizedOverflowBox的父控件Container的尺寸就是100*50，Container自身沒有約束，那么它就會調節自己為子控件大小，但是OverflowBox的父控件Container寬度卻是屏幕寬度，由此可見OverflowBox自己是沒有寬高的。
- SizedOverflowBox是會將原始約束傳遞給子控件，但是OverflowBox就不會了
Container(
color: Colors.blue,
child: SizedOverflowBox(
alignment: Alignment.topCenter,
size: Size(100, 50),
child: Container(
width: 50,
height: 80,
color: Colors.amber,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
color: Colors.blue,
constraints: BoxConstraints(
maxHeight: 50,
),
child: SizedOverflowBox(
alignment: Alignment.topCenter,
size: Size(100, 50),
child: Container(
width: 50,
height: 80,
color: Colors.amber,
),
),
),
Container(
margin: EdgeInsets.only(top: 50),
color: Colors.blue,
height: 50,
constraints: BoxConstraints(
maxHeight: 50,
),
child: OverflowBox(
alignment: Alignment.topCenter,
minWidth: 20,
maxWidth: 100,
maxHeight: 100,
minHeight: 20,
child: Container(
width: 50,
height: 120,
color: Colors.amber,
),
),
)
image.png
- 這里可以看到OverflowBox自身是沒有尺寸的，但是SizedOverflowBox是有的
- OverflowBox跟SizedOverflowBox的父控件在有BoxConstraints約束的時候，SizedOverflowBox將約束傳遞給了子控件，導致子控件受到約束后無法溢出，但是OverflowBox卻沒有
下一節：Layout組件之SizedBox
