组件:Row

作者: 爱玩单机的人 | 来源:发表于2018-11-05 10:37 被阅读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时有效。
      1. 当CrossAxisAlignment设置start时,VerticalDirection设置为down,则Row的children显示在交叉轴方向顶部,VerticalDirection设置为up,则Row的children显示在交叉轴方向底部。
      2. 当CrossAxisAlignment设置end时,VerticalDirection设置为down,则Row的children显示在交叉轴方向底部,VerticalDirection设置为up,则Row的children显示在交叉轴方向顶部

    相关文章

      网友评论

        本文标题:组件:Row

        本文链接:https://www.haomeiwen.com/subject/nwbhxqtx.html