写前端写习惯了,总觉得Container这个小部件应该是一个block元素。然而其实并不是这样的。
container默认是一个类似于span的元素——子组件有多大,自己就有多大。通过红色的背景色很明显能发现这点。
其实我一直觉得container这个组件的行为非常操蛋,一会儿大一会儿小,于是结合文档总结一下:
container先根据子组件的alignment来决定大小,然后根据自身设置的约束来决定大小,最后根据父容器来确定大小。
具体行为如下(可以不用看,直接去下面看结论):
- 如果container找不到子组件,也没有设置宽高,父组件也没有设置约束,那么这个container就会坍塌到最小。
- 如果container找不到子组件,也没有设置宽高,自身有设置约束,那么container就会按照自身的约束渲染大小,但是不会超出父组件的约束。
- 如果没设置约束,就按照父组件的约束渲染。
- 如果父组件没有约束,但是container有子组件,那么container就会包裹着子组件的大小。(本例子就是)
- 如果设置了alignment,并且有子组件,并且父组件是有约束的,那么container就会呈现block元素的样子,撑满父元素。
总结
container的行为分为两种:
1.在有约束的情况下,会尽量撑满约束
2.没有约束的情况下,会尽量坍缩。
3.在设置了alignment属性的情况下,就算没有约束,也会撑满屏幕。(这就是我说的奇怪的地方)