1.Container的行为

写前端写习惯了,总觉得Container这个小部件应该是一个block元素。然而其实并不是这样的。
container默认是一个类似于span的元素——子组件有多大,自己就有多大。通过红色的背景色很明显能发现这点。


image.png

其实我一直觉得container这个组件的行为非常操蛋,一会儿大一会儿小,于是结合文档总结一下:
container先根据子组件的alignment来决定大小,然后根据自身设置的约束来决定大小,最后根据父容器来确定大小。

具体行为如下(可以不用看,直接去下面看结论):

  1. 如果container找不到子组件,也没有设置宽高,父组件也没有设置约束,那么这个container就会坍塌到最小。
  2. 如果container找不到子组件,也没有设置宽高,自身有设置约束,那么container就会按照自身的约束渲染大小,但是不会超出父组件的约束。
  3. 如果没设置约束,就按照父组件的约束渲染。
  4. 如果父组件没有约束,但是container有子组件,那么container就会包裹着子组件的大小。(本例子就是)
  5. 如果设置了alignment,并且有子组件,并且父组件是有约束的,那么container就会呈现block元素的样子,撑满父元素。

总结

container的行为分为两种:
1.在有约束的情况下,会尽量撑满约束
2.没有约束的情况下,会尽量坍缩。
3.在设置了alignment属性的情况下,就算没有约束,也会撑满屏幕。(这就是我说的奇怪的地方)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。