Flutter深入浅出组件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox flutter

ConstrainedBox ConstrainedBox介绍
主要目的是对其子组件添加额外的约束，有时候子组件需要自动调整宽度和高度，以达到最佳的适配设计，那么这时候使用ConstrainedBox 是最佳的选择。
示例代码本文中很多效果都没有截图，可下载源代码运行项目源代码地址，或者通过视频教程查看视频教程地址
ConstrainedBox属性和说明
ConstrainedBox 只有两个属性，constraints 用来对子组件添加额外约束，child 被约束的子组件。

字段	属性	描述
constraints	BoxConstraints	对子组件添加额外约束
child	Widget	被约束的子组件

ConstrainedBox基本使用
【Flutter深入浅出组件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox】ConstrainedBox 的使用非常简单，接下来我们重点来关注BoxConstraints

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基本使用

ConstrainedBox( constraints: BoxConstraints( minWidth: 100, maxWidth: 200, minHeight: 30, maxHeight: 100 ), child: Container( color: Colors.orangeAccent, child: Text("ConstrainedExample"), ), )

BoxConstraints方法和说明
1、tight() 容器的宽度和高度取决于传进来的size，设定多大就是多大。

BoxConstraints.tight(Size size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height;

2、tightFor() 宽度和高度是可选参数，在不传入的情况下能大则大，在传入参数时设定多大就是多大。

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() 宽度和高度默认给最大值，在不传参数的时候能大则大，在传入参数的时候能紧则紧。

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，未超出能紧则紧

BoxConstraints.loose(Size size) : minWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height;

5、expand() 宽度和高度是可选参数，在不传入时依赖于父组件, 占用父组件剩余的全部空间，在传入时设定多大就是多大。

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 去除父元素的限制。

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 使用场景非常少，主要用于去除多重限制。