Container，设置宽高不响应？

问题场景：

日常开发中，我们遇到过这样的问题， Widget 设置了宽度 width: 100 而展示出来并不是 100 像素呢？而一般的处理方式是把 Widget 放在 Center 里面，对吗？

Container(
      height: 200,
      width: 200,
      color: Colors.red,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.green,
      ),
    )

我们创建了一个 200 * 200 红色的Container，里面放置一个 100 * 100 绿色的Container，运行，我们看到的结果是这样的：

image.png

绿色区域完全覆盖了红色父控件，绿色Container的宽高设置没有被响应，为什么会这样呢？解决这个问题，我们需要明确Flutter布局规则：

约束向下传递，Size向上传递，父级设置位置

所以，当我们在绿色Container外层再嵌套一个Center时，红色Container对子控件的宽高限制被Center消费了，而Center 允许绿色Container自由设定大小。

Container(
        height: 200,
        width: 200,
        color: Colors.red,
        child: Center(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.green,
          ),
        ),
      )

image.png

重要的事情再说一遍：

• Widget 从其父级获得自己的约束。约束仅由4个 double 类型组成：最小和最大宽度、最小和最大高度。
• Widget 只能在父级（Parent）的限制内决定自身的大小。这意味着 Widget 通常不能拥有它想要的任意大小

Scaffold(
   body: Container(
      color: Colors.blue,
      child: Column(
         children: [
            Text('Hello!'),
            Text('Goodbye!'),
         ]
      )
   )
)

image.png

Scaffold没有对Container进行约束时，Container的宽高为子控件的宽高

Scaffold(
  body: SizedBox.expand(
    child: Container(
        color: Colors.blue,
        child: Column(
          children: [
            Text('Hello!'),
            Text('Goodbye!'),
          ],
        )),
  ),
);

image.png

作为父控件，SizedBox.expand 对 Container 的宽高进行了约束要求，要求其子控件的大小与 Scaffold 本身的大小完全相同。