移動(dòng)開發(fā)中常常會(huì)對(duì)各個(gè)Widget進(jìn)行布局车荔，本文主要介紹了Flutter中最基本的三種布局方式：Row渡冻、Column、Stack忧便。從字面意思族吻，我們也可以理解到，Row對(duì)應(yīng)Android中的LinearLayout珠增，orientation為Horizontal呼奢。Column對(duì)應(yīng)于Android中的LinearLayout，orientation為Vertical切平。Stack對(duì)應(yīng)于Android中的RelativeLayout握础，可以通過添加相應(yīng)子控件，設(shè)置目標(biāo)控件在父控件的布局規(guī)則悴品。下面我們通過幾個(gè)簡(jiǎn)單的例子介紹這三種布局控件的基本用法禀综。
一.Row/Column
Row和Column分別為水平布局和垂直布局，這兩個(gè)布局控件具有相同的屬性值苔严，只是其子控件的方向不同定枷。這里我們重點(diǎn)了解下mainAxisAlignment和crossAxisAlignment兩個(gè)屬性，也就是主軸和交叉軸的概念届氢。
對(duì)于Row來說,水平方向就是主軸,垂直方向就是橫軸欠窒，對(duì)于Column來說,垂直方向就是主軸,水平方向就是橫軸。
其中MainAxisAlignment枚舉值：
- center：將children放置在主軸的中心退子；
- end：將children放置在主軸的末尾岖妄；
- spaceAround：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等寂祥，但是首尾child的空白區(qū)域?yàn)?/2荐虐；
- spaceBetween：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等丸凭，首尾child都靠近首尾福扬，沒有間隙硝逢；
- spaceEvenly：將主軸方向上的空白區(qū)域均分喳坠，使得children之間的空白區(qū)域相等，包括首尾child；
start：將children放置在主軸的起點(diǎn)排宰；
CrossAxisAlignment枚舉值有如下幾種：
- baseline：在交叉軸方向摄乒，使得children的baseline對(duì)齊瑰煎；
- center：children在交叉軸上居中展示抢呆；
- end：children在交叉軸上末尾展示；
- start：children在交叉軸上起點(diǎn)處展示刹缝；
- stretch：讓children填滿交叉軸方向碗暗；
示例代碼：
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Hello', style: TextStyle(fontSize: 48),),
Text('world', style: TextStyle(fontSize: 24),)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('Hello', style: TextStyle(fontSize: 48),),
Text('world', style: TextStyle(fontSize: 24),)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Hello', style: TextStyle(fontSize: 48),),
Text('world', style: TextStyle(fontSize: 24),)
],
),
顯示效果：
值得注意的是，Row和Column自身不帶滾動(dòng)屬性梢夯，如果超出了一行言疗，在debug下面則會(huì)顯示溢出的提示。當(dāng)子空間超出頁面時(shí)颂砸，如添加了ListView控件噪奄，可在外面包裹一層Expanded控件。
當(dāng)需要對(duì)子空間進(jìn)行等分布局時(shí)人乓，可使用Flex
示例：
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(color: Colors.red),
),
Expanded(
flex: 2,
child: Container(color: Colors.green),
),
Expanded(
flex: 1,
child: Container(color: Colors.blue),
),
],
)
效果：
二.Stack
在Stack中可通過兩種方式來定位子控件的位置勤篮，分別為使用Positioned包裹子控件及使用Align包裹子控件。我們先來看一段示例代碼：
Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
height: 200,
child:
Stack(
children: <Widget>[
Positioned(
top: 2,
left: 10,
child: Text('top_2_left_10'),
),
Positioned(
top: 2,
right: 10,
child: Text('top_2_right_10'),
),
Positioned(
bottom: 2,
right: 10,
child: Text('bottom_2_right_10'),
),
Positioned(
bottom: 2,
left: 10,
child: Text('bottom_2_left_10'),
),
Align(
alignment: Alignment.centerLeft,
child:Text('Left', style: TextStyle(fontSize: 15))
),
Align(
alignment: Alignment.center,
child:Text('Center', style: TextStyle(fontSize: 15))
),
Align(
alignment: Alignment.centerRight,
child:Text('Right', textAlign: TextAlign.right, style: TextStyle(fontSize: 15))
)
],
),
),
顯示效果如下圖：
其中色罚，Postioned可設(shè)置子控件在父控件中的對(duì)齊方式：左對(duì)齊碰缔，右對(duì)齊，頂部對(duì)齊戳护，底部對(duì)齊金抡。并通過設(shè)置具體數(shù)值設(shè)置上下左右距離各邊的距離。
Align控件可通過設(shè)置其屬性值alignment腌且，定位子控件在父控件中的位置梗肝。對(duì)齊子控件的方式有：
- bottomCenter 底部中心
- bottomLeft 左下角
- bottomRight 右下角
- center 水平垂直居中
- centerLeft 左邊緣中心
- centerRight 右邊緣中心
- topCenter 頂部中心
- topLeft 左上角
- topRight 右上角
三.總結(jié)
本文主要介紹了Flutter中的三種最基本的布局方式，我們可以通過靈活運(yùn)用各種布局方式及其輔助控件實(shí)現(xiàn)我們想要的效果铺董。
