LOADING

加载过慢请开启缓存,浏览器默认开启

flutter线性布局

2023/5/30
flutter flutter row flutter column

线性布局

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.

每日单词拼写

单词 语法 含义
vertical [ˈvɜːrtɪkl] n. 垂直的
cross [krɔːs] n. 交叉 横跨
axis [ˈæksɪs] n. 轴线
cross n. 侧轴 交叉轴