Flutter入门-布局Container、Padding、Align、Center
Container
Container的尺寸大小
Container自身尺寸变化的两种情况,以下两种情况皆不考虑父节点设置constraints和Container自身设置的width、height:
- 第一种是Container没有子节点的情况下,Container会将自己变得极小,这里我们只要考虑到存在这个Container,但不显示
- 第二种是Container有子节点的情况下,Container的大小会随着子节点的大小而变化。
这里我们可以这样去理解它:你去裁缝店让裁缝给你做一件衣服,但是你不告诉裁缝你的size或者说你不让裁缝测量你的size,那么他只能表示我知道了你要做一件衣服,然后就没有然后了;但是你让裁缝给你测量size,或者告诉告诉裁缝我想要一件多大的衣服,那么他就会给你做出一件让你看得见的衣服出来; 这里的衣服就是Container,而裁缝给你测量的size就是子节点的大小,你告诉裁缝size就是代表着设置Container的width、height;
父节点的constraints这个参数我们可以考虑为给裁缝装衣服的袋子,如果你不告诉他衣服的大小,只给他一个袋子,那么他就会按照袋子的大小给你做一件衣服.
这里的constraints我们还是不按照父节点的constraints来想,我们就以Container来说,给他设置一个constraints时就是表示限定当前的Container的最大最小值,这里的最大最小值比直接设置width、height优先级还更大,如果设置的width、height超出了constraints的值,那就会按照constraints的最大值来算。
以下代码中的宽高只会按照constraints的最大值来算
Container(
constraints: BoxConstraints(maxWidth: 200.0,maxHeight: 100.0),
width: 500.0,
height: 500.0,
)
Container的一些常用的参数说明:
alignment :设置子节点的对齐方式,这里我们得考虑到Container的大小需要比子节点的大小更大,不然这里的对齐我们是看不到效果的,对齐的方式有很多种
padding :设置padding,设置内边距,和Android的是一样的,用法如下:
padding: const EdgeInsets.all(10.0),
color : 设置背景颜色,该参数与foregroundDecoration、decoration不能共用,不然会被遮盖或报错
decoration : 设置背景装饰,处于child的后面,这里的装饰可以设置圆角、边框、背景色、背景图片等等之类的,功能比较强大,比如说我们用BoxDecoration就有这么多选项可以设置,还有其他的Decoration可以供我们选择
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
foregroundDecoration :设置背景装饰,处于child的前面,此处的装饰和上面的是一样的
width、 height :设置宽与高,这里我们如果想要将宽或高撑满可以用double.infinity来达到目的
width: double.infinity,
constraints :这个参数我们上面说过了,就是设置当前的Container的最大值,或者叫做约束
margin :外边距,和Android的margin一样的效果,代码如下
margin: const EdgeInsets.all(10.0),
transform :设置Container的变换矩阵,用法如下
child : 子节点
Padding
Padding这个最容易理解了,我们在Container中不是说过一个padding这个参数吗?就是这个,其实Container中的padding这个参数也是调用的Padding这个widget来达到目的的,padding就是设置内边距,他的用法很容易,如下所示,简单的用就是设置一个内边距,然后child设置一个子节点;
Padding(padding: const EdgeInsets.all(10.0),child: Text("title"),)
Align
我们在Container的时候用过一个alignment参数,设置对齐方式,这个Align就是对齐布局,他的用法如下
Align(
alignment: Alignment.center,
widthFactor: 2.0,
heightFactor: 2.0,
child: Text("XXX")
)
参数说明:
alignment:这个不用解释了吧,上面已经说了,是用来控制他的对齐方式了,有很多种对齐方式
widthFactor: 宽度因子,如果设置了宽度因子,则宽度会按照子节点的宽度*宽度因子数
heightFactor:高度因子,这个和宽度因子是一样的作用
chaild:子节点
Center
Center他是继承自Align,其内部就是帮我们设定了对齐方式为Alignment.center,其他的参数与Align一样,但是缺少了对齐方式的设定,因为这里的对齐方式已经设定死了