ConstrainedBox
ConstrainedBox介绍
主要目的是对其子组件添加额外的约束，有时候子组件需要自动调整宽度和高度，以达到最佳的适配设计，那么这时候使用ConstrainedBox 是最佳的选择。
示例代码
本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址
ConstrainedBox属性和说明
ConstrainedBox 只有两个属性，constraints 用来对子组件添加额外约束，child 被约束的子组件。
| 字段 | 属性 | 描述 |
|---|---|---|
| constraints | BoxConstraints | 对子组件添加额外约束 |
| child | Widget | 被约束的子组件 |
ConstrainedBox基本使用
ConstrainedBox 的使用非常简单，接下来我们重点来关注BoxConstraints
1
2
3
4
5
6
7
8
9
10
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: 100,
minHeight: 30,
),
child: Container(
color: Colors.orangeAccent,
child: Text("ConstrainedExample"),
),
)
BoxConstraints
BoxConstraints介绍
BoxConstraints对 RenderBox 布局的不可变布局约束，而 RenderBox 是二维笛卡尔坐标系中的渲染对象，想深入了解 RenderBox
BoxConstraints属性和说明
总共四个属性
| 字段 | 属性 | 描述 |
|---|---|---|
| minWidth | double | 最小宽度，默认0.0 |
| maxWidth | double | 最大宽度，默认double.infinity |
| minHeight | double | 最小高度，默认0.0 |
| maxHeight | double | 最大高度，默认double.infinity |
BoxConstraints基本使用
1
2
3
4
5
6
7
8
9
10
11
12
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
maxWidth: 200,
minHeight: 30,
maxHeight: 100
),
child: Container(
color: Colors.orangeAccent,
child: Text("ConstrainedExample"),
),
)
BoxConstraints方法和说明
1、tight()
容器的宽度和高度取决于传进来的size，设定多大就是多大。
1
2
3
4
5
BoxConstraints.tight(Size size)
: minWidth = size.width,
maxWidth = size.width,
minHeight = size.height,
maxHeight = size.height;
2、tightFor()
宽度和高度是可选参数，在不传入的情况下能大则大，在传入参数时设定多大就是多大。
1
2
3
4
5
6
7
const BoxConstraints.tightFor({
double? width,
double? height,
}) : minWidth = width ?? 0.0,
maxWidth = width ?? double.infinity,
minHeight = height ?? 0.0,
maxHeight = height ?? double.infinity;
3、tightForFinite()
宽度和高度默认给最大值，在不传参数的时候能大则大，在传入参数的时候能紧则紧。
1
2
3
4
5
6
7
const BoxConstraints.tightForFinite({
double width = double.infinity,
double height = double.infinity,
}) : minWidth = width != double.infinity ? width : 0.0,
maxWidth = width != double.infinity ? width : double.infinity,
minHeight = height != double.infinity ? height : 0.0,
maxHeight = height != double.infinity ? height : double.infinity;
4、loose()
最大宽度和最大高度限定于传入的size，未超出能紧则紧
1
2
3
4
5
BoxConstraints.loose(Size size)
: minWidth = 0.0,
maxWidth = size.width,
minHeight = 0.0,
maxHeight = size.height;
5、expand()
宽度和高度是可选参数，在不传入时依赖于父组件, 占用父组件剩余的全部空间，在传入时设定多大就是多大。
1
2
3
4
5
6
7
const BoxConstraints.expand({
double? width,
double? height,
}) : minWidth = width ?? double.infinity,
maxWidth = width ?? double.infinity,
minHeight = height ?? double.infinity,
maxHeight = height ?? double.infinity;
UnconstrainedBox
UnconstrainedBox 不会对子组件产生任何限制，允许其子组件按照本身大小绘制，那么在我们的平时开发过程中用到该组件会相对较少，一般用于去除多重限制 的时候会有一些帮助。
比如AppBar 中 actions 属性的按钮大小是固定的，如果想要修改就可以借助 UnconstrainedBox 去除父元素的限制。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
AppBar(
title: Text("ConstrainedExample"),
actions: [
UnconstrainedBox(
child: Container(
width: 20,
height: 20,
color: Colors.pink,
child: IconButton(onPressed: () {}, icon: Icon(Icons.alarm), iconSize: 20, padding: EdgeInsets.zero,),
),
),
IconButton(onPressed: () {}, icon: Icon(Icons.add)),
],
)
总结
ConstrainedBox 会根据子组件的需要自动调整宽度和高度以达到最佳的适配效果，如果确切知道组件需要设定多少宽高那么ConstrainedBox 就不在适合。 BoxConstraints 为 ConstrainedBox 额外增加的附加选项，尽可能达到业务需求。UnconstrainedBox 使用场景非常少，主要用于去除多重限制。