flutter线性布局

线性布局

flutter 中线性布局主要有两类，Row(行 水平布局)和Column(列 垂直布局),均继承自Flex布局

Row 布局

Row((
    textDirection:TextDirection.ltr,
    mainAxisSize:MainAxisSize.Max,
    mainAxisAligment:MainAxisAligment.spanceBetween,
    verticalDirectiont:VerticalAligment.down,
    crossAxisAligment:CrocessAxisAligment.start,
))

1. textDirection 子组件排列方向，按照当前系统预览排列,中/英文为从左到右,阿拉伯语言为从右到左

2. mainAxisSize 前布局的主轴占用的空间,可以为 min/max,为 min 时,空间为子 weight 实际大小的总和,为 max 时,表示尽可能占据整个屏幕

3. mainAxisAligment 当 MainAxisSize 为 max 时,子组件在主轴的排列方式,类似于 H5 中 flex 布局的 just-content，当 MainAxisSize 为 min 时,此属性无效

4. verticalDirection 纵轴的对齐方向,默认为 down,表示从上到下 👇,反之,up 即为从下到上 👆

5. corssAxisAligment 用于定义纵轴的对齐方式,默认为center,表示居中对齐.该参考系为verticalDirection

   verticalDirection	down	up
   crossAxisAligment.start	顶部对齐	底部对齐
   crossAxisAligment.end	底部对齐	顶部对齐
   crossAxisAligment.center	居中对齐	居中对齐

Column 布局

Column 的主轴与纵轴正好与 Row 相反

Column 与 Row 均会尽量占据主轴最大空间,即 Row 的宽度为屏幕宽度,而 Column 的长度为屏幕长度.纵轴则是子组件中占用最大的空间大小,如果想延申纵轴长度,就可以使用之前提到的ConstrainedBox或者SizedBox.

每日单词拼写