Flutter开发之布局-2-row(16)

1、mainAxisAlignment:主轴布局方式,row主轴方向是水平方向

在这里插入图片描述

默认值:MainAxisAlignment.start:

  1. start ,沿着主轴方向(水平方向)顶部对齐;

  2. end,沿着主轴方向(水平方向)底部对齐;

  3. center,沿着主轴方向(水平方向)居中对齐;

  4. spaceBetween ,沿着主轴方向(水平方向)平分剩余空间;

  5. spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;

  6. spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别;

2、crossAxisAlignment: 交叉轴的布局方式,对于row来说就是垂直方向的布局方式

在这里插入图片描述

默认值:CrossAxisAlignment.center,默认是水平居中

  1. start ,垂直主轴方向(垂直方向)顶部对齐;

  2. end,垂直主轴方向(垂直方向)底部对齐;

  3. center,垂直主轴方向(垂直方向)居中对齐;

  4. stretch ,垂直主轴方向(垂直方向)拉伸子child;

  5. baseline,这个要和textBaseline一起使用,;

3、verticalDirection:就是字child的垂直布局方向,向上还是向下,但是在row下这个不起作用

默认值:VerticalDirection.down 也就是从上到下的布局

down ,从上向下布局,上图示例我的代码是红、蓝、黄;

up,反过来从下向上布局,反过来就是黄、蓝、红;

作者:liu_520
链接:https://www.jianshu.com/p/c0cb06c060a9

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值