作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)
Column
Column是在Flutter中常见的布局控件，它负责垂直方向布局。Row负责程度方向布局，二者都是继承于Flex，相似于iOS外面的UIScrollView，然而又有很多不同。
先来看一下Column的构造函数
Column({ /// key Key key, /// Column的对其形式 默认是 MainAxisAlignment.start MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, /// 示意Column在垂直方向占用的大小，默认是 max，示意尽可能的充斥垂直方向空间。如果这是 min示意尽量小的占用垂直方向空间 MainAxisSize mainAxisSize = MainAxisSize.max, /// 横轴对其形式 默认是 居中对齐 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, /// 子控件的布局程序，不同国家书写习惯的不同(中文、英语从左往右书写，阿拉伯文从右往左书写)，这个参数能够帮忙咱们调整布局显示程序 TextDirection textDirection, /// 示意垂直方向的对其方向 VerticalDirection verticalDirection = VerticalDirection.down, /// 基线对齐形式 在Row外面会有应用 TextBaseline textBaseline, /// 子控件 List<Widget> children = const <Widget>[],}) mainAxisAlignment
mainAxisAlignment接管一个MainAxisAlignment类型的枚举，MainAxisAlignment共有六个枚举值，如下：
| 枚举值 | 形容 |
|---|---|
| start | 与 开始的地位对齐 |
| end | 与 完结的地位对齐 |
| center | 居中对齐 |
| spaceBetween | 把残余的空间拆分成n-1份(n是子控件的个数) 每一份都插入到子控件之间 |
| spaceEvenly | 把残余的空间拆分成n+1份(n是子控件的个数) 而后均匀分布 |
| spaceAround | 把残余空间拆分成 2n 份(n是子控件的个数) 每个子控件高低各放一份 |
看形容比拟艰涩，咱们间接来看成果：
MainAxisAlignment.start
居顶部
MainAxisAlignment.center
居两头
MainAxisAlignment.end
居底部
MainAxisAlignment.spaceBetween
把残余的空间拆分成n-1份(n是子控件的个数)，这里也就是3分，每一份都插入到子控件之间。看绿色数字就是每一份的编号
MainAxisAlignment.spaceEvenly
把残余的空间拆分成n+1份(n是子控件的个数)，这里也就是5分， 而后均匀分布。
MainAxisAlignment.spaceAround
把残余空间拆分成 2n 份(n是子控件的个数)，这里也就是8分，每个子控件高低各放一份
crossAxisAlignment
crossAxisAlignment接管一个CrossAxisAlignment枚举值，有以下5中枚举
| 枚举值 | 形容 |
|---|---|
| start | 与 开始的地位对齐 |
| end | 与 完结的地位对齐 |
| center | 居中对齐 |
| stretch | 程度方向裁减与Column雷同大小 |
| baseline | 有效 |
CrossAxisAlignment.start
居左侧
CrossAxisAlignment.center
居中
CrossAxisAlignment.end
居右侧
CrossAxisAlignment.stretch
子控件的宽度拉伸到与Column雷同大小
textDirection
textDirection参数接管一个TextDirection类型的枚举类型，它有两个不同的枚举值，如下
| 枚举值 | 形容 |
|---|---|
| rtl | 书写习惯是从左边开始 子控件默认从左边对齐 |
| ltr | 书写习惯是从右边开始 子控件默认从右边对齐 |
crossAxisAlignment参数会受到textDirection参数值影响。
如下：
- 当
textDirection的参数值为ltr时，crossAxisAlignment参数为CrossAxisAlignment.start这个时候子控件居左对齐。
- 当
textDirection的参数值为ltr时，crossAxisAlignment参数为CrossAxisAlignment.end这个时候子控件居右对齐。
- 当
textDirection的参数值为rtl时，crossAxisAlignment参数为CrossAxisAlignment.start这个时候子控件居右对齐。
- 当
textDirection的参数值为rtl时，crossAxisAlignment参数为CrossAxisAlignment.end这个时候子控件居做对齐。
总的来说textDirection会管制书写习惯来扭转布局。这个其实是在做国际化的时候用到的比拟多。在下一节行将解说的Row也雷同的会收到影响。
在下面的形容中有开始的地位和完结的地位，为什么不间接写右边或左边，其实也是受textDirection的影响，开始的地位就是书写开始的地位，完结的地位就是写完结的地位。
想体验以上的Column的示例的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->column_page.dart查看，并且能够下载下来运行并体验。