Flutter基础：最外层组件被拉伸

其实标题就是我想讲的内容：Flutter在最外层的布局类组件Column或Row等，在主轴和交叉轴方向上都被拉伸至撑满整个屏幕。为什么单独拿出来说？因为它们在交叉轴上的宽度本来是最大子元素宽度决定的，而这里打破了这个法则，最外层组件相当于被限制了宽高必须撑满屏幕。主轴上撑满屏幕的效果乍一看好像符合Column和Row的高度计算定义，那是因为它们默认情况下mainAxisSize: MainAxisSize.max，也是撑满可用空间，本场景凑巧和它默认情况表现一致而已。如果你将mainAxisSize值改为MainAxisSize.min会发现Column或者Row在主轴方向依然纹丝不动，讲道理应该缩小到刚好包裹子元素，故而证明在主轴上也被拉伸了。

所以最外层的组件会无条件被拉满屏幕，这是Flutter布局的一个固有条件，一切布局都在这个固定条件下有条不紊，但倘若不清楚该表现，还像web布局一样直接堆砌，意想不到的场景会时有发生，建议大家给Column和Row加上背景色进行一些实践。