Flutter中尺寸限制類容器組件包括ConstrainedBox宜狐、UnconstrainedBox势告、SizedBox蛇捌、AspectRatio、FractionallySizedBox咱台、LimitedBox络拌、Container。這些組件可以約束子組件的尺寸回溺，下面一一介紹春贸。
ConstrainedBox
ConstrainedBox組件約束子組件的最大寬高和最小寬高，假如一個組件寬高都是300遗遵，包裹在ConstrainedBox中萍恕，并給ConstrainedBox添加最大寬高約束，用法如下：
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: Container(height: 300, width: 300, color: Colors.red),
)
這時子組件是無法突破BoxConstraints設(shè)置的最大寬高车要，效果如下：
BoxConstraints的默認(rèn)值如下：
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity, //無限大
this.minHeight = 0.0,
this.maxHeight = double.infinity, //無限大
});
BoxConstraints提供了便捷的構(gòu)建函數(shù)允粤，方便開發(fā)者調(diào)用，如BoxConstraints.tight(Size size)和BoxConstraints.expand()等翼岁。
如果BoxConstraints嵌套使用类垫，有2個ConstrainedBox，如下：
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 100, maxWidth: 240),
child: Container(height: 300, width: 300, color: Colors.red),
),
)
以最大寬為例琅坡，第一個BoxConstraints的maxHeight值是60悉患，也就是約束其子控件最大高是60，第二個BoxConstraints的maxHeight值是100榆俺，由于第二個BoxConstraints也受第一個的約束售躁，所以第二個BoxConstraints最大高也只能是60，最終子組件的最大高是60谴仙，同理最大寬是200迂求，因此多級BoxConstraints嵌套約束最大值最終值等于多個BoxConstraints約束中的最小值碾盐。同理嵌套約束最小值等于多個BoxConstraints約束中的最大值晃跺。
UnconstrainedBox
UnconstrainedBox組件不對子組件做任何約束，比如有一個父組件大小是200x200毫玖，子組件是UnconstrainedBox掀虎，UnconstrainedBox包裹一個300x300的組件，代碼如下：
Container(
height: 200,
width: 200,
child: UnconstrainedBox(
child: Container(height: 300, width: 300, color: Colors.red),
),
)
效果如下：
注意：黃色區(qū)域表示子控件超出父控件的區(qū)域了付枫，黃色區(qū)域只會在debug模式下存在烹玉，在release模式下，只有紅色區(qū)域阐滩。
UnconstrainedBox雖然不限制其子控件的大小二打，但仍然受父控件的約束，超出父控件的區(qū)域?qū)厝 ?/p>
UnconstrainedBox允許設(shè)置對齊方式掂榔，用法如下：
UnconstrainedBox(
alignment: Alignment.topLeft,
...
)
效果如下：
和上一個圖對比继效，這次左邊和上邊沒有超出區(qū)域症杏，右邊和下邊各超出100px。
SizedBox
SizedBox是具有固定寬高的組件瑞信，直接指定具體的寬高厉颤，用法如下：
SizedBox(
height: 60,
width: 200,
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
我們也可以設(shè)置尺寸無限大，如下：
SizedBox(
height: double.infinity,
width: double.infinity,
...
)
雖然設(shè)置了無限大凡简，子控件是否會無限長呢逼友？不，不會秤涩，子控件依然會受到父組件的約束帜乞，會擴(kuò)展到父組件的尺寸，還有一個便捷的方式設(shè)置此方式：
SizedBox.expand(
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
SizedBox可以沒有子組件筐眷，但仍然會占用空間挖函，所以SizedBox非常適合控制2個組件之間的空隙，用法如下：
Column(
children: <Widget>[
Container(height: 30,),
SizedBox(height: 10,),
Container(height: 30,),
],
)
AspectRatio
AspectRatio組件是固定寬高比的組件浊竟，如果組件的寬度固定怨喘，希望高是寬的1/2，可以用AspectRatio實(shí)現(xiàn)此效果振定，用法如下：
AspectRatio(
aspectRatio: 2 / 1,
child: Container(color: Colors.red),
)
aspectRatio參數(shù)是寬高比必怜，可以直接寫成分?jǐn)?shù)的形式，也可以寫成小數(shù)的形式后频，但建議寫成分?jǐn)?shù)的形式梳庆，可讀性更高。效果如下：
FractionallySizedBox
當(dāng)我們需要一個控件的尺寸是相對尺寸時卑惜，比如當(dāng)前按鈕的寬度占父組件的70%膏执，可以使用FractionallySizedBox來實(shí)現(xiàn)此效果。
使用FractionallySizedBox包裹子控件露久，設(shè)置widthFactor寬度系數(shù)或者heightFactor高度系數(shù)更米，系數(shù)值的范圍是0-1，0.7表示占父組件的70%毫痕，用法如下：
FractionallySizedBox(
widthFactor: .7,
child: RaisedButton(
child: Text('button'),
),
)
通過alignment參數(shù)控制子組件顯示的位置征峦，默認(rèn)為center，用法如下：
FractionallySizedBox(
alignment: Alignment.centerLeft,
...
)
如果想讓2個控件之間的間隔是當(dāng)前父控件的10%消请，可以使用無子控件的FractionallySizedBox栏笆，用法如下：
Container(
height: 200,
color: Colors.grey,
child: Column(
children: <Widget>[
Container(
height: 50,
color: Colors.red,
),
Flexible(
child: FractionallySizedBox(
heightFactor: .1,
),
),
Container(
height: 50,
color: Colors.blue,
),
],
),
)
效果如下：
LimitedBox
LimitedBox組件是當(dāng)不受父組件約束時限制它的尺寸，什么叫不受父組件約束臊泰？就像這篇文章介紹的其他組件蛉加，它們都會對子組件約束，沒有約束的父組件有ListView、Row针饥、Column等祟偷，如果LimitedBox的父組件受到約束，此時LimitedBox將會不做任何操作打厘，我們可以認(rèn)為沒有這個組件修肠，代碼如下：
Container(
height: 100,
width: 100,
child: LimitedBox(
maxHeight: 50,
maxWidth: 100,
child: Container(color: Colors.green,),
),
)
效果如下：
LimitedBox設(shè)置的寬高不是正方形，此時效果時正方形户盯，說明LimitedBox沒有起作用嵌施。
在ListView中直接添加Container組件，如下：
ListView(
children: <Widget>[
Container(
color: Colors.green,
),
Container(
color: Colors.red,
),
],
)
這時你會發(fā)現(xiàn)什么也沒有莽鸭，因?yàn)樵谌萜鞑皇芗s束時吗伤，大小將會設(shè)置0，只需將Container包裹在LimitedBox中即可：
ListView(
children: <Widget>[
LimitedBox(
maxHeight: 100,
child: Container(
color: Colors.green,
),
),
LimitedBox(
maxHeight: 100,
child: Container(
color: Colors.red,
),
),
],
)
效果：
Container
Container組件應(yīng)該是最常用的組件之一硫眨，Container組件可以直接設(shè)置其寬高足淆，用法如下：
Container(
height: 100,
width: 100,
...
)
Container組件是這些組件里面屬性最多的一個，當(dāng)然也是用法最復(fù)雜的一個礁阁，這里重點(diǎn)介紹Container對子組件的約束巧号，我在前面的文章中已經(jīng)詳細(xì)的介紹了Container，這里不在介紹姥闭，奉上跳轉(zhuǎn)地址：https://blog.csdn.net/mengks1987/article/details/104388393
總結(jié)
這么多約束類的容器組件丹鸿，到底要使用哪一個組件呢？總結(jié)如下：
- ConstrainedBox：適用于需要設(shè)置最大/小寬高棚品，組件大小以來子組件大小靠欢，但不能超過設(shè)置的界限。
- UnconstrainedBox：用到情況不多铜跑，當(dāng)作ConstrainedBox的子組件可以“突破”ConstrainedBox的限制门怪，超出界限的部分會被截取。
- SizedBox：適用于固定寬高的情況锅纺，常用于當(dāng)作2個組件之間間隙組件掷空。
- AspectRatio：適用于固定寬高比的情況。
- FractionallySizedBox：適用于占父組件百分比的情況伞广。
- LimitedBox：適用于沒有父組件約束的情況拣帽。
- Container：適用于不僅有尺寸的約束疼电，還有裝飾（顏色嚼锄、邊框、等）蔽豺、內(nèi)外邊距等需求的情況区丑。
原文作者：老孟
原文鏈接：全網(wǎng)最詳細(xì)的一篇Flutter 尺寸限制類容器總結(jié)
來源：思否
