Flutter学习笔记16-尺寸限制类容器

尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等。

1.ConstrainedBox

ConstrainedBox用于对子组件添加额外的约束。如果你想让子组件的最小高度是50.0像素，则可以使用const BoxConstraints（minHeight：50.0）作为约束。

BoxConstraints

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.expand()可以生成一个尽可能大的用以填充另一个容器的BoxConstraints。可以自行查看文档。
代码示例：

class ConstrainedBoxDemo extends StatelessWidget {
  ConstrainedBoxDemo({
    Key key,
    this.currentWidth,
    this.describe = 'ConstrainedBox',
  }) : super(key: key);

  final double currentWidth;
  final String describe;

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 100.0,
        minHeight: 20.0,
        maxWidth: 300.0,
        maxHeight: 100.0,
      ),
      child: Container(
        margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0),
        //  child 宽高超过指定限制范围失效
        width: currentWidth,
        height: 250.0,
        child: Text(describe, style: TextStyle(color: Colors.white)),
        color: Color(0xfff8bbd0),
      ),
    );
  }
}

代码运行效果图如下：

2. SizedBox

SizedBox用于给子元素指定固定的宽高。代码示例：

SizedBox(
  width: 80.0,
  height: 80.0,
  child: Container(color: Colors.orange),
)

代码运行效果如下图：

2.UnconstrainedBox

UnconstrainedBox不会对子组件产生任何限制，它允许其子组件按照其本身大小绘制。一般情况下会很少直接使用此组件，在实际开发中，当我们发现已经使用SizedBox或ConstrainedBox给子元素指定了宽高，但是仍然没有效果时，几乎可以断定：已经有父元素已经设置了限制。这时就可以使用UnconstrainedBox去除父元素的限制。
Material组件库中的AppBar的右侧菜单中，使用SizedBox指定了loading按钮的大小。代码示例：

 AppBar(
   title: Text('UnconstrainedBox Demo'),
   actions: <Widget>[
         SizedBox(
             width: 20, 
             height: 20,
             child: CircularProgressIndicator(
                 strokeWidth: 3,
                 valueColor: AlwaysStoppedAnimation(Colors.white),
             ),
         )
   ],
)

代码运行效果图如下：

发现右侧loading按钮大小并没有发生变化。因为AppBar中已经指定了actions按钮的限制条件，所以使用UnconstrainedBox来去除父元素的限制。代码示例：

AppBar(
  title: Text('UnconstrainedBox Demo'),
  actions: <Widget>[
      UnconstrainedBox(
            child: SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 3,
                valueColor: AlwaysStoppedAnimation(Colors.white),
              ),
          ),
      )
  ],
)

代码运行效果图如下：

3.LimitedBox

对最大宽高进行限制的控件。将child限制在指定的最大宽高中 这就使得child自身没有约束大小的时候具有了外部约束，依然控制了其大小。但前提是LimitedBox不受约束，例如：通过给LimitedBox最大高度，widget通常会调整其自身的大小去适应父窗体，但是，当放置在colum列表中时，它将采用给定的高度。如果LimitedBox外部宽度没有被约束，child的宽受到LimitedBox（maxWidth）最大宽度限制，如果LimitedBox外部高度没有被约束，child的宽受到LimitedBox（maxHeight）最大高度限制。
代码示例：

class LimitedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        SizedBox(
          child: Text('Column下效果'),
        ),
        Container(
          width: 100.0,
          height: 100.0,
          color: Color(0xfff8bbd0),
          child: Text('100 * 100', style: TextStyle(color: Colors.white)),
        ),
        LimitedBox(
          maxWidth: 100,
          maxHeight: 100,
          child: Container(
            width: 250,
            height: 300,
            child: Text('250 * 300', style: TextStyle(color: Colors.white)),
            color: Color(0xfff48fb1),
          ),
        )
      ],
    );
  }
}

代码运行效果图如下：

代码传送门