组件: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线对齐


    textbaseline.gif

使用注意点

  • 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显示在交叉轴方向左边

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