1、mainAxisAlignment:主轴布局方式,column主轴方向是垂直的方向
默认值:MainAxisAlignment.start:
- start ,沿着主轴方向(垂直方向)顶部对齐;
- end,沿着主轴方向(垂直方向)底部对齐;
- center,沿着主轴方向(垂直方向)居中对齐;
- spaceBetween ,沿着主轴方向(垂直方向)平分剩余空间;
- spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;6.spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别;
2、crossAxisAlignment: 交叉轴的布局方式,对于column来说就是水平方向的布局方式
默认值:CrossAxisAlignment.center,默认是水平居中
- start ,垂直主轴方向(水平方向)左侧对齐;
- end,垂直主轴方向(水平方向)右侧对齐;
- center,垂直主轴方向(水平方向)居中对齐;
- stretch ,垂直主轴方向(水平方向)拉伸子child;
- baseline,这个要和textBaseline一起使用,;
3、textBaseline:字体的基线(基线这东西一直没搞懂,具体详见下一章Row,效果更明显,垂直方向没啥用,不明显)
默认值:是空的
- alphabetic ,用于对齐字母字符底部的水平线;
- ideographic,用于对齐表意字符的水平线;
4、textDirection:文字布局方向
默认值:没有,但在row的布局上是左到右的,请看Row的章节
- TextDirection.ltr ,从左到右;
- TextDirection.rtl,从右到做布局;
5、verticalDirection:就是字child的垂直布局方向,向上还是向下
new Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, verticalDirection: VerticalDirection.down, // textDirection:, textBaseline: TextBaseline.alphabetic, children:[ Container( color: Colors.red, height: 30, width: 30, ), Container( color: Colors.blue, height: 30, width: 30, ), Container( color: Colors.yellow, height: 30, width: 30, ), ], ), ),
默认值:VerticalDirection.down 也就是从上到下的布局
- down ,从上向下布局,上图示例我的代码是红、蓝、黄;
- up,反过来从下向上布局,反过来就是黄、蓝、红;
转自: