Flutter容器组件<尺寸限制类容器（ConstrainedBox、SizedBox…）>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等，本节将介绍一些常用的。

ConstrainedBox

ConstrainedBox用于对子组件添加额外的约束。

ConstrainedBox({
  Key key,
  @required this.constraints,
  Widget child,
})

例如我们想让子组件的最小高度是80像素，可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束。

body: ConstrainedBox(
  constraints: BoxConstraints(
    minHeight: 80
  ),
  child: Container(
    height: 0,
    color: Colors.red,
  )
)

运行效果

ConstrainedBox约束

从结果可以看出，虽然已经将Container的高度设置为0，但是ConstrainedBox对Container的最小高度约束生效了，所以最终Container的高度仍然是80。

这里需要特别介绍一下ConstrainedBox类中一个最重要的属性，即BoxConstraints constraints，BoxConstraints就是用来设置限制条件的。

const BoxConstraints({
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})

除了直接设置这些宽高属性之外，BoxConstraints还定义了一些便捷的构造函数，用于快速生成特定限制规则的BoxConstraints。下面以BoxConstraints.tight(Size size)方法为例：

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

从上面的定义可以看出，tight方法可以生成给定大小的限制，例如限制宽高为200像素：

body: ConstrainedBox(
  constraints: BoxConstraints.tight(Size.square(200)),
  child: Container(
    height: 0,
    color: Colors.red,
  ),
)

运行效果

tight方法限制宽高

除此之外还有一些其它的便捷函数，这里就不逐个介绍了，感兴趣的可以自己查看API文档。

SizedBox

SizedBox用于给子元素指定固定的宽高。SizedBox定义如下：

const SizedBox({ 
  Key key, 
  this.width,
  this.height, 
  Widget child 
})

从定义上来看，它的使用也很简单。例如我们想指定一个组件的宽高都为200像素：

body: SizedBox(
  height: 200,
  width: 200,
  child: Container(
    height: 0,
    color: Colors.blue,
  ),
)

运行效果

SizedBox限定宽高

细心的同学可能已经发现，SizedBox感觉就是ConstrainedBox的一个特殊实现，上面代码完全可以替换为：

body: ConstrainedBox(
  constraints: BoxConstraints.tight(Size.square(200)),
  child: Container(
    height: 0,
    color: Colors.blue,
  ),
)

而实际上ConstrainedBox和SizedBox都是通过RenderConstrainedBox来渲染的，这在后面会详细介绍，这里就不展开了。

Flutter中像这类的容器还有很多，大家可以自己查阅相关文档，我要早点把这篇文章写完回家过年哈哈哈哈~~

上面介绍了两个比较常用的尺寸限制类容器，那么我们思考一下，如果有多重限制，那么是否会产生冲突呢？如果不会的话，冲突又是如何避免的呢？带着这两个疑问我们接着往下分析。

body: ConstrainedBox(
    constraints: BoxConstraints(minWidth: 20.0, minHeight: 100.0), //第一级约束
    child: ConstrainedBox(
      constraints: BoxConstraints(minWidth: 100.0, minHeight: 20.0), //第二级约束
      child: Container(
        height: 0,
        width: 0,
        color: Colors.blue,
      ),
    ))

运行效果

多重限制最小值

从结果我们可以看到，组件的宽高都是100像素，也就是说第一级约束的minHeight条件生效，第二级约束的minWidth条件生效。我们暂时可以认为没有出现冲突，我们修改一下约束的代码：

body: ConstrainedBox(
    constraints: BoxConstraints(minWidth: 100.0, minHeight: 20.0),  //第一级约束
    child: ConstrainedBox(
      constraints: BoxConstraints(minWidth: 20.0, minHeight: 100.0),  //第二级约束
      child: Container(
        height: 0,
        width: 0,
        color: Colors.blue,
      ),
    ))

其实就是简单地调换了一下两个限制条件，运行后发现效果并没有发生变化。也就是说第一级约束的minWidth条件生效，第二级约束的minHeight生效条件。我们可以发现这样一条规律： 有多重限制时，对于minWidth和minHeight来说，是取其中相应数值较大的。实际上，只有这样才能保证多重限制不发生冲突。

那么我们是不是有理由推断：有多重限制时，对于maxWidth和maxHeight来说，是取其中相应数值较小的。我们来验证一下：

body: ConstrainedBox(
    constraints: BoxConstraints(maxWidth: 100.0, maxHeight: 20.0), //第一级约束
    child: ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 20.0, maxHeight: 100.0), //第二级约束
      child: Container(
        height: 1000,
        width: 1000,
        color: Colors.blue,
      ),
    ))

运行效果

多重限制最大值

果然和我们的猜想是一致的。

除了上面介绍的这些常用的尺寸限制类容器外，还有一些其他的尺寸限制类容器，比如AspectRatio，它可以指定子组件的长宽比、LimitedBox 用于指定最大宽高、FractionallySizedBox 可以根据父容器宽高的百分比来设置子组件宽高等。