Flutter入门-布局Container、Padding、Align、Center
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一样，但是缺少了对齐方式的设定，因为这里的对齐方式已经设定死了