垂直布局Column Widget使子元素（子组件）垂直排列。
Column基本用法
示例代码：
body: Column(
children: [
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如图：
column1.jpg
我们发现文字是以最长的一段文字居中对齐的，看起来很别扭。那如果想让文字以左边开始对齐，只需要加入一个对齐属性。
crossAxisAlignment: CrossAxisAlignment.start,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如图：
column2.jpg
- CrossAxisAlignment.star：居左对齐。
- CrossAxisAlignment.end：居右对齐。
- CrossAxisAlignment.center：居中对齐。
主轴和副轴的辨识
在设置对齐方式的时候还有mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴呢。
- main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。
- cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的幅轴就是水平方向的。
上面的代码增加垂直方向居中，因为用的是Column组件，所以就是主轴方向，这时候要用的就是主轴对齐：
mainAxisAlignment: MainAxisAlignment.center,
示例代码：
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如图：
column3.jpg
水平方向相对屏幕居中
Column Widget默认以最长的一段文字居中对齐，想要让文字相对于水平方向居中可以添加Center()实现。
示例代码：
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
)),
效果如图：
column4.jpg
Expanded属性的使用
Column Widget中Expanded（灵活布局）的使用。比如想让中间区域变大，而头部区域和底部根据文字所占空间进行显示。
示例代码：
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('let the crowd follow you.'),
Expanded(child: Text('The code word is ‘Rochambeau,’ dig me?')),
Text('Rochambeau!'),
],
),
效果如图：
column5.jpg