线性布局
flutter 中线性布局主要有两类,Row(行 水平布局)和Column(列 垂直布局),均继承自Flex布局
Row 布局
Row((
textDirection:TextDirection.ltr,
mainAxisSize:MainAxisSize.Max,
mainAxisAligment:MainAxisAligment.spanceBetween,
verticalDirectiont:VerticalAligment.down,
crossAxisAligment:CrocessAxisAligment.start,
))
textDirection
子组件排列方向,按照当前系统预览排列,中/英文为从左到右,阿拉伯语言为从右到左mainAxisSize
前布局的主轴占用的空间,可以为 min/max,为 min 时,空间为子 weight 实际大小的总和,为 max 时,表示尽可能占据整个屏幕mainAxisAligment
当 MainAxisSize 为 max 时,子组件在主轴的排列方式,类似于 H5 中 flex 布局的 just-content,当 MainAxisSize 为 min 时,此属性无效verticalDirection
纵轴的对齐方向,默认为 down,表示从上到下 👇,反之,up 即为从下到上 👆corssAxisAligment
用于定义纵轴的对齐方式,默认为center,表示居中对齐.该参考系为verticalDirectionverticalDirection 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. 侧轴 交叉轴 |