故不登高山硫麻，不知天之高也瞎疼；不臨深溪水援，不知地之厚也；
???? Flutter學(xué)習(xí)之五 文件命名規(guī)范及代碼格式化
前言
作為6年的OC coder來說宴杀，開始在寫Flutter布局的時(shí)候還是有點(diǎn)不適應(yīng)癣朗。就拿下面簡單的頁面來說：
如果用原生開發(fā)，一般來說三個(gè)控件就OK了旺罢，左邊2個(gè)
UILabel旷余，右邊是個(gè)UIButton，然后設(shè)置約束就成了主经。但是這在
Flutter里面就不能這么整了荣暮，Flutter里面要先確定布局方向，是橫向的還是縱向的罩驻。對于上面的UI穗酥，在Flutter里面就是最外層是左右布局，要選用Row惠遏，左邊2個(gè)文本是上下布局要選用Column砾跃，最終的結(jié)果是，一個(gè)Row里面有2個(gè)子Widget节吮，一是個(gè)Column一個(gè)是Button抽高，其中Column里面包含2個(gè)Text。
正文
在Flutter中Row和Column是線性布局組件透绩，所謂線性布局翘骂，即指沿水平或垂直方向排列子組件。Row和Column都繼承自Flex帚豪，彈性布局以后再說碳竟。
主軸和縱軸
在介紹Row和Column之前，要先提一下主軸和縱軸狸臣。如果布局是沿水平方向莹桅，那么主軸就是指水平方向，而縱軸即垂直方向烛亦；如果布局沿垂直方向诈泼，那么主軸就是指垂直方向，而縱軸就是水平方向煤禽。在線性布局中铐达，有兩個(gè)定義對齊方式的枚舉類MainAxisAlignment和CrossAxisAlignment，分別代表主軸對齊和縱軸對齊檬果。
Row（水平方向排列）
Row的定義如下：
Row({
Key? key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection? textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
List<Widget> children = const <Widget>[],
})
-
mainAxisSize：表示在水平方向占用的空間娶桦，默認(rèn)是MainAxisSize.max，表示盡可能的占用水平方向的空間，即占用水平方向的最大寬度衷畦，和子組件寬度無關(guān)。MainAxisSize.min表示盡可能的少占用空間知牌，自身寬度即子組件最大寬祈争。 -
mainAxisAlignment：水平方向?qū)R方式，如果mainAxisSize的值為MainAxisSize.min角寸，那么此屬性沒有意義菩混，因?yàn)樽咏M件的寬度等于Row的寬度。只有mainAxisSize的值為MainAxisSize.max時(shí)扁藕，MainAxisAlignment.start（center沮峡、end）表示左（中、右）對齊亿柑。 -
textDirection：表示文字初始方向邢疙，漢字是從左往右的，阿拉伯是從右往左望薄。設(shè)置這個(gè)會影響主軸對齊方式疟游，比較好理解。 -
verticalDirection：表示Row縱軸（垂直）的對齊方向痕支，默認(rèn)是VerticalDirection.down颁虐，表示從上到下。 -
crossAxisAlignment：表示子組件在縱軸方向的對齊方式卧须，Row的高度等于子組件中最高的子元素高度另绩，它的取值和MainAxisAlignment一樣(包含start、end花嘶、 center三個(gè)值)笋籽，不同的是crossAxisAlignment的參考系是verticalDirection，即verticalDirection值為VerticalDirection.down時(shí)crossAxisAlignment.start指頂部對齊察绷，verticalDirection值為VerticalDirection.up時(shí)干签，crossAxisAlignment.start指底部對齊；而crossAxisAlignment.end和crossAxisAlignment.start正好相反拆撼； -
children：子組件數(shù)組容劳。
舉個(gè)栗子??
如果理解上面屬性的介紹，看下面的代碼闸度，估計(jì)腦海里就有了大致的UI
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
textDirection: TextDirection.rtl,
children: const <Widget>[
Text(" see you again "),
Text(" I am Twist "),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
verticalDirection: VerticalDirection.up,
children: const <Widget>[
Text(
" see you again ",
style: TextStyle(fontSize: 30.0),
),
Text(" I am Twist "),
],
),
],
);
UI顯示如下：
Column（垂直方向排列）
Column是在垂直方向排列其子組件竭贩。參數(shù)和Row一樣，不同的是布局方向?yàn)榇怪陛航鬏S縱軸正好相反留量，讀者可類比Row來理解。
舉個(gè)栗子??
class ColumnPage extends StatelessWidget {
const ColumnPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Column'),
),
body: Container(
color: Colors.red,
child: Column(
// 主軸（垂直方向） ，start系統(tǒng)默認(rèn)值
mainAxisAlignment: MainAxisAlignment.start,
// 與主軸垂直（水平方向）楼熄，center系統(tǒng)默認(rèn)值
crossAxisAlignment: CrossAxisAlignment.center,
children: const <Widget>[
Text("see"),
Text("you"),
Text("again"),
],
),
),
);
}
}
為了方便看效果忆绰，我加了一個(gè)背景顏色， 效果圖如圖3：
Column下默認(rèn)主軸是最大值可岂，即屏高错敢，寬度沒有設(shè)置，默認(rèn)是子組件（again）最大寬缕粹。
總結(jié)
整體來說還是很好理解的稚茅，看到一個(gè)頁面就先橫縱咔咔一分，然后開始橫套縱平斩、縱套橫亚享，這樣一個(gè)頁面就出來了。
后記
在寫UI的時(shí)候绘面，有的時(shí)候需要設(shè)置一個(gè)簡單的間距欺税，或者是某個(gè)組件占用剩下的全部空間，請看下篇文章Expanded飒货。
