顺风而呼,声非加疾也,而闻者彰。
前言
前面的一些章节中,Container
多多少少出现过,这到底是个啥呢?本章节我就个人理解来介绍一下这个常用的容器类组件。
正文
Container
是一个组合类容器,它本身不对应具体的RenderObject
,它是DecoratedBox
、ConstrainedBox
、Transform
、Padding
、Align
等组件组合的一个多功能容器,所以我们只需通过一个Container
组件可以实现同时需要装饰、变换、限制的场景。Container
的定义如下:
Container({
Key? key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
})
-
padding
: 内边距,容器内留白,限定容器内子组件到容器的边距。 -
margin
:外边距,容器外留白,限定容器外的其它组件到容器的边距。 -
decoration
:前景装饰,与color
互斥。原因是当指定color
时,Container
内会自动创建一个decoration
。 -
constraints
:容器大小的限制条件,约束。可以与width、height
同时存在,但是后者优先级高。原因是Container
内部会根据width、height
来生成一个constraints
。
Container特点
-
1、没有child的时候宽高默认为0
下面是类初始化时候默认值:
从图1和图2可以看出,在不设置宽、高以及不设置子组件的时候,会生成一个最大宽高都为0的Box,这个Box作为子组件,也就是current,请记住这个current。整个demo:
body上放个Column,Column一个child为Container,然后给个红色的背景颜色,看下效果。
发现啥也没有,看来的确宽高默认0。给个高度试下:
看效果:
因为body默认宽度为屏宽,所以宽度是这样子的。
-
2、有child的时候,就按照child约束来:
给Container加个子组件看下:
效果如下
其实在给一个组件设置属性的时候,本质是在当前child又包了一层装饰型组件,从源码中可以看出:
总结
如果想给一个组件设置color、alignment、padding、margin、transform以及装饰器decoration(圆角、阴影),那么就可以在这个组件外包一层Container,然后直接设置即可。
后记
代码只看还是不行的,有些东西写着写着就理解了。纸上得来终觉浅,绝知此事要躬行~