组件：Column

属性说明：

mainAxisAlignment：主轴方向上（纵向）的对齐方式，控制child的垂直位置摆放，默认是start。 MainAxisAlignment枚举值：

• start：将children放置在主轴的起点；
• center：将children放置在主轴的中心；
• end：将children放置在主轴的末尾；
• spaceAround：将主轴方向上的空白区域均分，使得child之间的空白区域相等，但是首尾child的空白区域为1/2；
• spaceBetween：将主轴方向上的空白区域均分，使得child之间的空白区域相等，首尾child离Column的顶部和底部没有间隙；
• spaceEvenly：将主轴方向上的空白区域均分，使得所有child之间的空白区域相等；

---

mainAxisSize：在主轴方向占有空间的值，默认是max。 MainAxisSize枚举值：

• max：根据传入的布局约束条件，最大化主轴方向的可用空间；
• min：与max相反，是最小化主轴方向的可用空间；

---

crossAxisAlignment：children在交叉轴方向（横向）的对齐方式，控制child的水平位置摆放，默认值center。 CrossAxisAlignment枚举值：

• baseline：在交叉轴方向，使得children的baseline对齐；
• center：children在交叉轴上居中展示；
• end：children在交叉轴上末尾展示；
• start：children在交叉轴上起点处展示；
• stretch：让children填满交叉轴方向；

---

textDirection：定义了children水平摆放顺序，默认为null,跟随系统。 TextDirection枚举值：

• ltr：从left到right进行布局
• rtl：从right到left进行布局 left和right是相对于CrossAxisAlignment的取值的，当CrossAxisAlignment取start，left为Column的左边，right为Column的右边，当CrossAxisAlignment取end，left为Column的右边，right为Column的左边。

---

verticalDirection：定义了children垂直摆放顺序，默认是down。 VerticalDirection枚举值：

• down：从top到bottom进行布局
• up：从bottom到top进行布局 比如有三个child，文本A、文本B、文本C，如果设置为down，则垂直方向显示为文本A、文本B、文本C，设置为up，则显示为文本C、文本B、文本A

---

textBaseline：文本依据baseline对齐方式，默认是null。由于column在横向只有一个直接child，所以textBaseline无作用，设置了也看不到任何效果。 TextBaseline枚举值：

• alphabetic：基于下图的alphabetic线对齐
• ideographic：基于下图的ideographic线对齐

---

使用注意点：

• CrossAxisAlignment如果设置为 baseline，那么TextBaseline不能为null，否则报错
• CrossAxisAlignment如果设置为stretch，则Column的children必须具备交叉轴方向大小自适应能力，否则此属性将和设置为start没有区别。比如Column的宽度为300px，它有三个Text孩子节点，字体居中显示，孩子节点文字宽度均为100px，那么此时不管设置start还是stretch，都会看到三个Text节点一直显示在左边，字体并现有居中显示在150px处，说明Text并没有填满交叉轴方向，因为Text是根据文字大小自适应大小，所以不具备交叉轴方向大小自适应能力，但是如果把Text换成Container并设置不同的背景颜色就能很容易看出设置为stretch是填充满交叉轴方向
• textDirection必须配合CrossAxisAlignment使用，且只有CrossAxisAlignment设置为start或end时有效。
  1. 当CrossAxisAlignment设置start时，textDirection设置为ltr，则Column的children显示在交叉轴方向左边，textDirection设置为rtl，则Column的children显示在交叉轴方向右边。
  2. 当CrossAxisAlignment设置end时，textDirection设置为ltr，则Column的children显示在交叉轴方向右边，textDirection设置为rtl，则Column的children显示在交叉轴方向左边

转载于:https://juejin.im/post/5bf20e11f265da616a47425b