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同样，可是缺乏了对齐方式的设定，由于这里的对齐方式已经设定死了