组件：Row
2018-11-05 本文已影响0人
爱玩单机的人
属性说明：
mainAxisAlignment：主轴方向上（横向）的对齐方式，控制child的水平位置摆放，默认是start。
MainAxisAlignment枚举值：
- start：将children放置在主轴的起点；
- center：将children放置在主轴的中心；
- end：将children放置在主轴的末尾；
- spaceAround：将主轴方向上的空白区域均分，使得child之间的空白区域相等，但是首尾child的空白区域为1/2；
- spaceBetween：将主轴方向上的空白区域均分，使得child之间的空白区域相等，首尾child离Row的左右没有间隙；
-
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进行布局
比如有三个child，文本A、文本B、文本C，如果设置为ltr，则水平方向显示为文本A、文本B、文本C，设置为rtl，则显示为文本C、文本B、文本A
verticalDirection：定义了children垂直摆放顺序，默认是down。
VerticalDirection枚举值：
- down：从top到bottom进行布局
- up：从bottom到top进行布局
top和Bottom是相对于CrossAxisAlignment的取值的，当CrossAxisAlignment取start，top为Row的顶部，bottom为Row的底部，当CrossAxisAlignment取end，top为Row的底部，bottom为Row的顶部。
textBaseline：文本依据baseline对齐方式，默认是null。
TextBaseline枚举值：
- alphabetic：基于下图的alphabetic线对齐
-
ideographic：基于下图的ideographic线对齐
textbaseline.gif
使用注意点：
- CrossAxisAlignment如果设置为 baseline，那么TextBaseline不能为null，否则报错
- CrossAxisAlignment如果设置为stretch，则Row的children必须具备交叉轴方向大小自适应能力，否则此属性将和设置为start没有区别。比如Row的高度为300px，它有三个Text孩子节点，字体居中显示，孩子节点文字高度均为100px，那么此时不管设置start还是stretch，都会看到三个Text节点一直显示在顶部，字体并现有居中显示在150px处，说明Text并没有填满交叉轴方向，因为Text是根据文字大小自适应大小，所以不具备交叉轴方向大小自适应能力，但是如果把Text换成Container并设置不同的背景颜色就能很容易看出设置为stretch是填充满交叉轴方向
- VerticalDirection必须配合CrossAxisAlignment使用，且只有CrossAxisAlignment设置为start或end时有效。
- 当CrossAxisAlignment设置start时，VerticalDirection设置为down，则Row的children显示在交叉轴方向顶部，VerticalDirection设置为up，则Row的children显示在交叉轴方向底部。
- 当CrossAxisAlignment设置end时，VerticalDirection设置为down，则Row的children显示在交叉轴方向底部，VerticalDirection设置为up，则Row的children显示在交叉轴方向顶部
