Flutter学习笔记十——垂直布局Column组件的使用

垂直布局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
我们发现文字是以最长的一段文字居中对齐的，看起来很别扭。那如果想让文字以左边开始对齐，只需要加入一个对齐属性。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：居中对齐。

主轴和副轴的辨识

在设置对齐方式的时候还有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默认以最长的一段文字居中对齐，想要让文字相对于水平方向居中可以添加Center()实现。
示例代码：

 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（灵活布局）的使用。比如想让中间区域变大，而头部区域和底部根据文字所占空间进行显示。
示例代码：

 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