用户登录

crossAxis ,交叉轴 .. 它跟主轴是垂直的关系.. 也就是在 Row 里面,跟横着的这个主轴垂直的这个轴,是交叉轴 .. 也就是它应该是从上到下的这条线 .. 在 Column 里面 .. 主轴是竖着的 .. 跟这个主轴垂直的交叉轴应该就是横着的,水平的这条线 ..

现在我们用的是 Row .. 在它里面添加一个 crossAxisAlignment .. 它的值默认应该是 CrossAxisAlignment.center ..

中间的这个 IconBadge 可以让它大一点 .. 给它一个 size 属性 .. 大小设置成 64.0 ... 现在小部件在 crossAxis 这个轴的上面是居中的 ..

把这个交叉轴的对齐设置成 CrossAxisAlignment.start ... 现在会在交叉轴的顶部对齐 ... 再试一下 CrossAxisAlignment.end ... 现在会在交叉轴的底部对齐 ..

再试一下拉伸 ... CrossAxisAlignment.stretch ..

在 Column 里面同样我们可以使用 crossAxisAlignment 这个属性设置一下小部件在交叉轴的对齐方式 .. 现在你看到的是在 Column 里的交叉轴拉伸的效果 ... 再试一下 .. start ... 在交叉轴的起点对齐 .. 还可以是 center ... 居中 ... 在终点对齐,可以用一个 CrossAxisAligment.end ..

crossAxis:交叉轴《 Flutter 移动应用:布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点