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,
)
1
2
3
4
5
Container的一些常用的参数说明：
alignment ：设置子节点的对齐方式，这里我们得考虑到Container的大小需要比子节点的大小更大，不然这里的对齐我们是看不到效果的，对齐的方式有很多种

padding ：设置padding，设置内边距，和Android的是一样的,用法如下：

padding: const EdgeInsets.all(10.0),
1
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,
})
1
2
3
4
5
6
7
8
9
10
foregroundDecoration ：设置背景装饰，处于child的前面，此处的装饰和上面的是一样的

width、 height ：设置宽与高，这里我们如果想要将宽或高撑满可以用double.infinity来达到目的

width: double.infinity,
1
constraints ：这个参数我们上面说过了，就是设置当前的Container的最大值，或者叫做约束

margin ：外边距，和Android的margin一样的效果，代码如下

margin: const EdgeInsets.all(10.0),
1
transform :设置Container的变换矩阵，用法如下

child : 子节点

Padding
Padding这个最容易理解了，我们在Container中不是说过一个padding这个参数吗？就是这个，其实Container中的padding这个参数也是调用的Padding这个widget来达到目的的，padding就是设置内边距，他的用法很容易，如下所示,简单的用就是设置一个内边距，然后child设置一个子节点；

Padding(padding: const EdgeInsets.all(10.0),child: Text("title"),)
1
Align
我们在Container的时候用过一个alignment参数，设置对齐方式，这个Align就是对齐布局，他的用法如下

Align(
  alignment: Alignment.center,
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: Text("XXX")
)
1
2
3
4
5
6
参数说明：

alignment：这个不用解释了吧，上面已经说了，是用来控制他的对齐方式了，有很多种对齐方式

widthFactor: 宽度因子，如果设置了宽度因子，则宽度会按照子节点的宽度*宽度因子数

heightFactor：高度因子，这个和宽度因子是一样的作用

chaild：子节点

Center
Center他是继承自Align，其内部就是帮我们设定了对齐方式为Alignment.center,其他的参数与Align一样，但是缺少了对齐方式的设定，因为这里的对齐方式已经设定死了
————————————————
版权声明：本文为CSDN博主「笑叹人生@gaoxiang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a823643426/article/details/96201069