全网最详细的一篇Flutter 尺寸限制类容器总结
老孟程序员 人气:1
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(
children:
加载全部内容