关于flutter:Flutter深入浅出组件篇ConstrainedBoxBoxConstraintsUnconstrainedBox

ConstrainedBox

ConstrainedBox介绍

次要目标是对其子组件增加额定的束缚，有时候子组件须要主动调整宽度和高度，以达到最佳的适配设计，那么这时候应用ConstrainedBox 是最佳的抉择。

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

ConstrainedBox属性和阐明

ConstrainedBox 只有两个属性，constraints 用来对子组件增加额定束缚，child 被束缚的子组件。

ConstrainedBox根本应用

ConstrainedBox 的应用非常简单，接下来咱们重点来关注BoxConstraints

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

BoxConstraints

BoxConstraints介绍

BoxConstraints对 RenderBox 布局的不可变布局束缚，而 RenderBox 是二维笛卡尔坐标系中的渲染对象，想深刻理解 RenderBox

BoxConstraints属性和阐明

总共四个属性

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 应用场景非常少，次要用于去除多重限度。