1.2.1　Column

豎列（Column）可將多個(gè)子組件沿著垂直的“縱坐標(biāo)軸”方向排列。由于它需要同時(shí)排列多個(gè)子組件，所以嵌套子組件的參數(shù)不是child，而是復(fù)數(shù)形式children，代碼如下：

這樣就可以把5個(gè)組件垂直排列在一個(gè)“豎列”中，運(yùn)行效果如圖1-13所示。

這里值得一提的是，上例Column的5個(gè)子組件中第4個(gè)是一個(gè)高度為30單位且無填充色的空白Container組件。實(shí)戰(zhàn)中，頁面布局設(shè)計(jì)可能經(jīng)常需要在組件之間留白，而插入透明的組件是一種較為常見的思路。有經(jīng)驗(yàn)的開發(fā)者通常會(huì)使用SizedBox組件而不是Container組件做到同樣的視覺效果，因?yàn)榍罢呖墒钩绦蜻\(yùn)行更高效。SizedBox組件實(shí)際上就是一個(gè)單純負(fù)責(zé)設(shè)置尺寸的組件，且可以借助Dart語法中的const關(guān)鍵字進(jìn)一步提升運(yùn)行效率，具體用法可參考本章關(guān)于SizedBox組件的介紹。

1．子組件的傳入

不同于常見的child參數(shù)，這里的子組件由children參數(shù)接收一個(gè)“組件列表”類型，即一系列需要嵌在Column里面的子組件。通常情況下，Column用于程序界面布局，如登錄頁面等，所以傳入的子組件應(yīng)該都是需要顯示到屏幕上的，一般不希望出現(xiàn)“放不下”的情況。如果需要展示的內(nèi)容不屬于程序界面而屬于業(yè)務(wù)邏輯內(nèi)容的渲染，如產(chǎn)品列表、公司人員列表、財(cái)務(wù)清單等可能會(huì)出現(xiàn)幾百甚至幾萬個(gè)元素，應(yīng)該考慮使用ListView組件，而不是這里的Column組件。ListView組件支持用戶滑動(dòng)翻頁，具體用法可以參考第5章“列表和網(wǎng)格”的相關(guān)介紹。

2．主軸和交叉軸

因?yàn)镃olumn組件會(huì)將子組件依次垂直排列，所以垂直方向又稱為“主軸”方向，而“交叉軸”方向是指與主軸成90°直角的方向，因此Column組件的交叉軸是水平方向的。簡(jiǎn)而言之，因?yàn)镃olumn組件把子組件“豎著排列”，所以它的主軸就是“豎著的”，而它的交叉軸就是“橫著的”。

1）mainAxisSize屬性

主軸尺寸是指Column組件在主軸方向（垂直方向）所占的空間。傳入類型為MainAxisSize，默認(rèn)值是MainAxisSize. max（盡量大），例如可通過這個(gè)屬性將其設(shè)置成MainAxisSize. min（盡量小）。默認(rèn)情況下，Column組件在不打破父級(jí)組件尺寸約束的前提下，會(huì)在主軸方向盡量多占空間，例如填滿全屏幕的高度，如圖1-14（左圖）所示，但如果傳入MainAxisSize. min，則會(huì)使Column縮至子組件高度的總和，運(yùn)行效果如圖1-14（右圖）所示。圖中灰色部分為Column組件的背景色，以方便觀察它們所占的空間。

程序運(yùn)行時(shí)，Column組件會(huì)根據(jù)其父級(jí)約束及其children的總尺寸，配合mainAxisSize屬性，最終確定自身尺寸。當(dāng)全部子組件尺寸相加后依然低于父級(jí)組件提供的最大可用空間時(shí)，該屬性就可以決定Column組件是否應(yīng)該將剩余的空間占滿。

這里需要注意的是，F(xiàn)lutter組件在布局的過程中一般不會(huì)違背父級(jí)約束。例如當(dāng)Column組件的父級(jí)組件是一個(gè)尺寸為300×300單位的Container組件時(shí)，則該Column組件自身尺寸一定也會(huì)是300×300單位，因此這里的mainAxisSize屬性就無法生效。換言之，即使將主軸尺寸設(shè)置為“盡量小”，Column組件若受到父級(jí)約束的最小尺寸限制，則它排列完children后仍可能會(huì)有剩余空間。反之，若children參數(shù)傳入的子組件數(shù)量過多，或者高度總和過大，即使將主軸尺寸設(shè)置為“盡量大”，Column組件依然會(huì)在排列完后沒有剩余空間。更進(jìn)一步，如果Column組件的高度不足以安放所有子組件，就會(huì)在運(yùn)行時(shí)渲染“溢出”的黑黃色警戒線效果，如圖1-15所示，提醒開發(fā)者注意調(diào)整布局。

此類“溢出警戒線”只會(huì)在調(diào)試模式（Debug Mode）出現(xiàn)。正式發(fā)布版（Release）的Flutter程序不應(yīng)出現(xiàn)溢出提示，而是直接裁剪掉溢出的部分不予顯示，并且不報(bào)錯(cuò)。

2）mainAxisAlignment屬性

主軸對(duì)齊方式，需要傳入的類型為MainAxisAlignment類，默認(rèn)為MainAxisAlignment. start，即沿主軸起始位置擺放。在垂直排列的Column組件里，起始位置一般為頂部，如圖1-16（左圖）所示。若需將子組件沿主軸末尾位置擺放，則可通過傳入MainAxisAlignment. end實(shí)現(xiàn)，如圖1-16（中圖）所示。如需居中擺放，則可傳入MainAxisAlignment. center，如圖1-16（右圖）所示。

除了主軸的起始、中間、末尾3個(gè)位置外，Column組件還提供了另外3種可自動(dòng)插入留白的對(duì)齊方式，分別是spaceBetween（在相鄰的子組件之間插入空白，但不在第一個(gè)和最后一個(gè)子組件外圍插入留白）、spaceEvenly（在子組件周圍統(tǒng)一插入留白）、spaceAround（在相鄰的子組件之間插入留白，并在第一個(gè)和最后一個(gè)子組件外圍插入一半的留白）。圖1-17從左到右依次展示了spaceBetween、spaceEvenly和spaceAround的效果。

若主軸排列完所有子組件后并沒有出現(xiàn)剩余空間，則這里的對(duì)齊就沒有效果。如需要在Column組件的任意特定位置設(shè)置固定留白，則可以通過在children屬性中插入透明的Container組件或SizedBox組件實(shí)現(xiàn)。

3）crossAxisAlignment屬性

交叉軸對(duì)齊方式，默認(rèn)為居中對(duì)齊，即CrossAxisAlignment. center。如果需要向左或者向右對(duì)齊，則可以通過傳入start和end設(shè)置。圖1-18從左到右依次展示了CrossAxisAlignment.center（中間）、CrossAxisAlignment. start（起始）和CrossAxisAlignment. end（結(jié)束）的效果。

除了以上3種交叉軸對(duì)齊方式外，F(xiàn)lutter還提供了stretch和baseline這2種對(duì)齊選項(xiàng)。前者要求子組件在寬度上盡量拉伸，以填滿整個(gè)父級(jí)組件的最大約束。例如，實(shí)戰(zhàn)中可通過它實(shí)現(xiàn)“所有按鈕寬度一致”的效果。后者則是按照子組件文字的基準(zhǔn)線對(duì)齊。這是Column組件由父類Flex組件繼承而來的屬性，一般實(shí)戰(zhàn)中不會(huì)在Column組件中使用。

3．垂直方向

垂直方向（verticalDirection屬性）是指子組件的排列順序，默認(rèn)為從上到下進(jìn)行排列，即VerticalDirection. down 方向。如果有必要，則可以通過VerticalDirection. up在運(yùn)行時(shí)反轉(zhuǎn)子組件的順序。圖1-19分別展示了默認(rèn)的排列方向及反轉(zhuǎn)后的運(yùn)行效果。

這個(gè)屬性使用率不高，因?yàn)镃olumn組件主要用于渲染用戶界面元素，而不用于顯示諸如貨物清單等邏輯業(yè)務(wù)元素，因此Column內(nèi)部子組件的順序通常在設(shè)計(jì)和開發(fā)時(shí)就已經(jīng)確定了，不太需要通過該屬性在運(yùn)行時(shí)調(diào)整順序。