flutter布局-1-column

最新推荐文章于 2025-11-22 01:50:54 发布

转载最新推荐文章于 2025-11-22 01:50:54 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stroll/p/11585211.html

文章标签：

#移动开发

本文深入解析Flutter中Column布局属性，包括mainAxisAlignment、crossAxisAlignment、textBaseline等，详细说明各项属性的作用及默认值，并通过实例展示不同属性设置的效果。

1、mainAxisAlignment：主轴布局方式，column主轴方向是垂直的方向

mainaxis.png

默认值：MainAxisAlignment.start：

start ，沿着主轴方向(垂直方向)顶部对齐；
end，沿着主轴方向(垂直方向)底部对齐；
center，沿着主轴方向(垂直方向)居中对齐；
spaceBetween ，沿着主轴方向(垂直方向)平分剩余空间；
spaceAround，把剩余空间平分成n份，n是子widget的数量，然后把其中一份空间分成2份，放在第一个child的前面，和最后一个child的后面；
6.spaceEvenly，把剩余空间平分n+1份，然后平分所有的空间，请注意和spaceAround的区别；

2、crossAxisAlignment: 交叉轴的布局方式，对于column来说就是水平方向的布局方式

crossaxis.png

默认值：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的垂直布局方向，向上还是向下

未标题-1.png

new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, verticalDirection: VerticalDirection.down, // textDirection:, textBaseline: TextBaseline.alphabetic, children: <Widget>[ Container( color: Colors.red, height: 30, width: 30, ), Container( color: Colors.blue, height: 30, width: 30, ), Container( color: Colors.yellow, height: 30, width: 30, ), ], ), ),