全網最詳細的一篇Flutter 尺寸限制類容器總結
阿新 • • 發佈：2020-03-05
Flutter中尺寸限制類容器元件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container。這些元件可以約束子元件的尺寸，下面一一介紹。
## ConstrainedBox
ConstrainedBox元件約束子元件的最大寬高和最小寬高，假如一個元件寬高都是300，包裹在ConstrainedBox中，並給ConstrainedBox新增最大寬高約束，用法如下：
```dart
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: Container(height: 300, width: 300, color: Colors.red),
)
```
這時子元件是無法突破BoxConstraints設定的最大寬高，效果如下：
BoxConstraints的預設值如下：
```dart
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity, //無限大
this.minHeight = 0.0,
this.maxHeight = double.infinity, //無限大
});
```
BoxConstraints提供了便捷的構建函式，方便開發者呼叫，如`BoxConstraints.tight(Size size)`和`BoxConstraints.expand()`等。
如果BoxConstraints巢狀使用，有2個ConstrainedBox，如下：
```dart
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的元件，程式碼如下：
```dart
Container(
height: 200,
width: 200,
child: UnconstrainedBox(
child: Container(height: 300, width: 300, color: Colors.red),
),
)
```
效果如下：
注意：黃色區域表示子控制元件超出父控制元件的區域了，黃色區域只會在debug模式下存在，在release模式下，只有紅色區域。
UnconstrainedBox雖然不限制其子控制元件的大小，但仍然受父控制元件的約束，超出父控制元件的區域將會擷取。
UnconstrainedBox允許設定對齊方式，用法如下：
```dart
UnconstrainedBox(
alignment: Alignment.topLeft,
...
)
```
效果如下：
和上一個圖對比，這次左邊和上邊沒有超出區域，右邊和下邊各超出100px。
## SizedBox
SizedBox是具有固定寬高的元件，直接指定具體的寬高，用法如下：
```dart
SizedBox(
height: 60,
width: 200,
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
```
我們也可以設定尺寸無限大，如下：
```dart
SizedBox(
height: double.infinity,
width: double.infinity,
...
)
```
雖然設定了無限大，子控制元件是否會無限長呢？不，不會，子控制元件依然會受到父元件的約束，會擴充套件到父元件的尺寸，還有一個便捷的方式設定此方式：
```dart
SizedBox.expand(
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
```
SizedBox可以沒有子元件，但仍然會佔用空間，所以SizedBox非常適合控制2個元件之間的空隙，用法如下：
```dart
Column(
ch