垂直布局Column Widget使子元素（子組件）垂直排列。
Column基本用法
示例代碼：
body: Column(
children: <Widget>[
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如圖：
column1.jpg
我們發(fā)現(xiàn)文字是以最長的一段文字居中對齊的，看起來很別扭。那如果想讓文字以左邊開始對齊，只需要加入一個對齊屬性。
crossAxisAlignment: CrossAxisAlignment.start,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如圖：
column2.jpg
- CrossAxisAlignment.star：居左對齊。
- CrossAxisAlignment.end：居右對齊。
- CrossAxisAlignment.center：居中對齊。
主軸和副軸的辨識
在設(shè)置對齊方式的時候還有mainAxisAlignment屬性，意思就是主軸對齊方式，那什么是主軸，什么又是幅軸呢。
- main軸：如果你用column組件，那垂直就是主軸，如果你用Row組件，那水平就是主軸。
- cross軸：cross軸我們稱為幅軸，是和主軸垂直的方向。比如Row組件，那垂直就是幅軸，Column組件的幅軸就是水平方向的。
上面的代碼增加垂直方向居中，因為用的是Column組件，所以就是主軸方向，這時候要用的就是主軸對齊：
mainAxisAlignment: MainAxisAlignment.center,
示例代碼：
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
),
效果如圖：
column3.jpg
水平方向相對屏幕居中
Column Widget默認(rèn)以最長的一段文字居中對齊，想要讓文字相對于水平方向居中可以添加Center()實現(xiàn)。
示例代碼：
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('let the crowd follow you.'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!'),
],
)),
效果如圖：
column4.jpg
Expanded屬性的使用
Column Widget中Expanded（靈活布局）的使用。比如想讓中間區(qū)域變大，而頭部區(qū)域和底部根據(jù)文字所占空間進(jìn)行顯示。
示例代碼：
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('let the crowd follow you.'),
Expanded(child: Text('The code word is ‘Rochambeau,’ dig me?')),
Text('Rochambeau!'),
],
),
效果如圖：
column5.jpg
