flutter 各种容器box, 有必要搞清楚

• ConstrainedBox 约束盒子

image.png

• UnconstrainedBox 不约束盒子 子控件不能超出父控件

  
  image.png

• OverflowBox 溢出盒子 允许子控件超出父容器，不警告

  
  image.png

• LimitedBox 有限制的盒子 将限制子控件的大小

  
  image.png

• FittedBox 定制的盒子
  image.png

• Row 横向布局,不对子控件添加约束, 溢出会显示溢出警告

  
  image.png
  

  解决办法

  
  image.png

Colum 布局,宽松约束

• SizedBox.expand 让子组件变的和父组件一样大

  
  严格约束

如果你到 Flutter 的 box.dart 文件中搜索 BoxConstraints 构造器，你会发现以下内容：

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

如果你重新阅读 样例 2， 它告诉我们屏幕强制 Container 变得和屏幕一样大。 为何屏幕能够做到这一点， 原因就是给 Container 传递了严格约束。

一个宽松约束换句话来说就是设置了最大宽度/高度， 但是让允许其子 widget 获得比它更小的任意大小。 换句话来说，宽松约束的最小宽度/高度为 0。

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

如果你访问 样例 3， 它将会告诉我们 Center 让红色的 Container 变得更小， 但是不能超出屏幕。Center 能够做到这一点的原因就在于 给 Container 的是一个宽松约束。 总的来说，Center 起的作用就是从其父级（屏幕）那里获得的严格约束， 为其子级（Container）转换为宽松约束。