如果你是 flutter 的新手洒沦，通過(guò)本文豹绪，你可以完全掌握 Row、Column 組件的用法申眼，解答你心中已久的疑惑瞒津，快速上手項(xiàng)目開發(fā)。又或者你對(duì) flutter 有一定開發(fā)經(jīng)驗(yàn)括尸，也許本文同樣可以給你幫助與啟發(fā)巷蚪。
Row 和 Column 用在哪里
在 flutter 中，Row 和 Column 組件都是布局類的組件濒翻，他們是用來(lái)管理多個(gè)子組件的排列方式的屁柏。寫過(guò) Android 原生的同學(xué)都知道，他們和 LinearLayout 非常的相似肴焊，通過(guò)設(shè)置 LinearLayout 的 orientation 屬性可以控制子 View 的排列方式是水平還是垂直的前联。在 flutter 中，Row 用來(lái)水平排列子組件娶眷，Column 用來(lái)垂直排列子組件似嗤。
一句話概括就是，Row 水平排列組件届宠，Column 垂直排列組件烁落。
主軸和縱軸
首先介紹兩個(gè)重要的概念：主軸和縱軸乘粒。Row 組件水平排列，所以它的主軸是水平方向伤塌，縱軸是垂直方向灯萍。Column 組件垂直排列，所以它的主軸是垂直方向每聪，縱軸是水平方向旦棉。軸的對(duì)齊方式規(guī)定了所有子組件在軸上應(yīng)該如何排列，記住這句話非常的重要药薯！
下面代碼中有一個(gè) Row 組件绑洛，包含了三個(gè) Container，他們的高度各不相同童本。
body: Row(
children: [
Container(
width: 50,
height: 100,
color: Colors.grey,
),
Container(
width: 50,
height: 200,
color: Colors.yellow,
),
Container(
width: 50,
height: 300,
color: Colors.red,
),
],
),
可以看到真屯，Row 組件在不指定任何屬性的情況下，在主軸（水平方向）所有子組件默認(rèn)是沿軸從左到右排列的（左對(duì)齊）穷娱，在縱軸（垂直方向）所有子組件默認(rèn)在縱軸的中間位置绑蔫。
這和 Row 組件的構(gòu)造函數(shù)是一致的，默認(rèn)指定主軸對(duì)齊方式是從左到右泵额，縱軸的對(duì)齊方式是居中配深。
屬性講解
我以 Row 組件來(lái)說(shuō)明下面這些屬性該如何用，并展示其效果梯刚。Column 參數(shù)和 Row一樣凉馆，不同的是布局方向?yàn)榇怪毙皆ⅲ鬏S縱軸正好相反亡资，讀者可類比 Row 來(lái)理解。
MainAxisAlignment
主軸對(duì)齊方式向叉，Row 組件的一個(gè)屬性锥腻，規(guī)定了所有子組件在主軸上應(yīng)該如何排列。在上面代碼的基礎(chǔ)上母谎，為 Row 指定 MainAxisAlignment 屬性瘦黑，值為 MainAxisAlignment.center。規(guī)定所有子組件應(yīng)該在主軸的中間排列奇唤，圖1就變成了圖2幸斥。
mainAxisAlignment: MainAxisAlignment.center,
CrossAxisAlignment
縱軸對(duì)齊方式，規(guī)定了所有子組件在縱軸上應(yīng)該如何排列咬扇。在上面代碼的基礎(chǔ)上甲葬，增加如下代碼，規(guī)定所有子組件應(yīng)該沿縱軸從左到右排列懈贺，圖2就變成了圖3经窖。
crossAxisAlignment: CrossAxisAlignment.start,
TextDirection
在 Row 組件中坡垫，表示水平方向子組件的布局順序(是從左往右還是從右往左)。在上面代碼的基礎(chǔ)上画侣，增加如下代碼冰悠，TextDirection.rtl 表示子組件的從右到左布局，圖3就變成了圖4配乱。
textDirection: TextDirection.rtl,
試試將主軸的對(duì)齊方式由居中改為從左到右溉卓，即
mainAxisAlignment: MainAxisAlignment.center,
改為
mainAxisAlignment: MainAxisAlignment.start,
奇怪的事情發(fā)生了，子組件并沒(méi)有像我們想的那樣沿主軸從左到右排列搬泥，結(jié)果如下圖的诵。如何解釋這個(gè)現(xiàn)象呢？那就是設(shè)置textDirection: TextDirection.rtl會(huì)讓主軸的方向變?yōu)閺挠业阶?/strong>佑钾，所以設(shè)置mainAxisAlignment: MainAxisAlignment.start就會(huì)讓子組件右對(duì)齊了西疤。讀者也可以這么理解：textDirection是mainAxisAlignment的參考系。
VerticalDirection
和 TextDirection 類似休溶，它是 CrossAxisAlignment 的參考系代赁，這個(gè)就不細(xì)講了。
MainAxisSize
表示 Row 在主軸(水平)方向占用的空間兽掰，默認(rèn)是 MainAxisSize.max芭碍，表示盡可能多的占用水平方向的空間，此時(shí)無(wú)論子 widgets 實(shí)際占用多少水平空間孽尽，Row 的寬度始終等于水平方向的最大寬度窖壕。在上面代碼的基礎(chǔ)上，增加如下代碼杉女，圖4就變成了圖5瞻讽。
mainAxisSize: MainAxisSize.min,
從上圖可以看出，如果 mainAxisSize 值為 MainAxisSize.min熏挎，則 mainAxisAlignment 屬性就會(huì)失效速勇，因?yàn)樽咏M件的寬度等于Row的寬度。只有當(dāng) mainAxisSize 的值為MainAxisSize.max 時(shí)坎拐，此屬性才有意義烦磁。
寫在最后
如果你對(duì)我感興趣，請(qǐng)移步到 http://blogss.cn 哼勇，進(jìn)一步了解都伪。
- 如果本文幫助到了你，歡迎點(diǎn)贊和關(guān)注 ??
- 由于作者水平有限积担，文中如果有錯(cuò)誤陨晶，歡迎在評(píng)論區(qū)指正 ??
- 本文首發(fā)于簡(jiǎn)書，未經(jīng)許可禁止轉(zhuǎn)載 ??
