一:问题描述
想要实现一个大 Container 嵌套一个小 Container 的布局,如下图所示
这样的布局实现起来想着也很简单,代码如下所示
````js
Container(
width: 200,
height: 200,
color: Colors.red,
child: Container(
width: 50,
height: 50,
color: Colors.blue,
),
),
``````
但运行后的实际效果却是这样的
明明已经指定了子组件的宽高,为什么没有效果呢?而且从实际的效果图来看,子组件完全充满了父组件,这又是什么原因呢?
二:问题分析
这是因为 Container 的宽高计算机制造成的,因为 Container 在计算宽高的时候,不仅需要考虑 width 和 height 属性,还要遵循父组件的尺寸约束,即 BoxConstraints 。
BoxConstraints 有四个属性,分别为 minWidth、m