Container,设置宽高不响应?

576 阅读1分钟
问题场景:

日常开发中,我们遇到过这样的问题, 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 本身的大小完全相同。