组件:Row

属性说明:

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时有效。
    1. 当CrossAxisAlignment设置start时,VerticalDirection设置为down,则Row的children显示在交叉轴方向顶部,VerticalDirection设置为up,则Row的children显示在交叉轴方向底部。
    2. 当CrossAxisAlignment设置end时,VerticalDirection设置为down,则Row的children显示在交叉轴方向底部,VerticalDirection设置为up,则Row的children显示在交叉轴方向顶部

你可能感兴趣的:(组件:Row)