彈性布局疏尿，類似于 CSS 的 Flexbox十饥。
| 屬性名 | 類型 | 簡(jiǎn)介 |
|---|---|---|
| direction | Axis |
主軸的方向 |
| mainAxisAlignment | MainAxisAlignment |
子Widget 在主軸的對(duì)齊方式 |
| mainAxisSize | MainAxisSize |
主軸應(yīng)該占用多大的空間 |
| crossAxisAlignment | CrossAxisAlignment |
子Widget 在交叉軸的對(duì)齊方式 |
| textDirection | TextDirection |
子Widget 在主軸方向上的布局順序 |
| verticalDirection | VerticalDirection |
子Widget 在交叉軸方向上的布局順序 |
| textBaseline | TextBaseline |
子Widget 時(shí)使用哪個(gè)基線 |
| children | List< Widget> |
Flex布局里排列的子控件 |
direction 的取值：主軸的方向
| Axis 值 | 簡(jiǎn)述 |
|---|---|
| Axis.horizontal | 主軸為水平方向疙赠，子Widget 就會(huì)沿水平方向排列，則交叉軸為垂直方向。 |
| Axis.vertical | 主軸為垂直方向，子Widget 就會(huì)沿垂直方向排列绵脯，則交叉軸為水平方向。 |
mainAxisAlignment 的取值：子控件在主軸的對(duì)齊方式
| MainAxisAlignment 值 | 簡(jiǎn)述 |
|---|---|
| MainAxisAlignment.start | 沿著主軸的起點(diǎn)對(duì)齊休里，textDirection 必須有值蛆挫，以確定是從左邊開始的還是從右邊開始的 |
| MainAxisAlignment.end | 沿著主軸的終點(diǎn)對(duì)齊，textDirection 必須有值妙黍，以確定是在左邊結(jié)束的還是在右邊結(jié)束的 |
| MainAxisAlignment.center | 在主軸上居中對(duì)齊 |
| MainAxisAlignment.spaceBetween | 在主軸上悴侵，兩端對(duì)齊，子控件之間的間隔都相等 |
| MainAxisAlignment.spaceAround | 在主軸上拭嫁，將多余的控件均勻分布給 子控件之間可免，而且第一個(gè) 子Widget 和 最后一個(gè)子Widget 距邊框的距離是 兩個(gè) 子Widget 距離的一半 |
| MainAxisAlignment.spaceEvenly | 在主軸上，將多余的控件均勻分布給子控件之間做粤，而且第一個(gè) 子Widget 和 最后一個(gè)子Widget 距邊框的距離和 子控件之間的距離一樣 |
其中最后三個(gè)屬性不太好理解浇借，這里給出圖示：
MainAxisAlignment.spaceBetween
兩端頂格，中間均分
MainAxisAlignment.spaceAround
該效果我稱為拉手布局怕品，相當(dāng)于小朋友伸開手妇垢，且相互間手拉手。
MainAxisAlignment.spaceEvenly
均分間距
mainAxisSize 的取值 : 表示主軸應(yīng)該占用多大的空間
| MainAxisSize 值 | 簡(jiǎn)述 |
|---|---|
| MainAxisSize.min | 主軸的大小是能顯示完 子Widget 的最小大小堵泽，主軸的大小就是 子Widget 的大小 |
| MainAxisSize.max | 主軸能顯示的最大的大小，根據(jù)約束來(lái)判斷 |
crossAxisAlignment 的取值：子控件在交叉軸的對(duì)齊方式
| CrossAxisAlignment 值 | 簡(jiǎn)述 |
|---|---|
| CrossAxisAlignment.start | 沿著交叉軸的起點(diǎn)對(duì)齊恢总，verticalDirection 必須有值迎罗，以確定是從左邊開始的還是從右邊開始的 |
| CrossAxisAlignment.end | 沿著主軸的終點(diǎn)對(duì)齊，verticalDirection 必須有值片仿，以確定是在左邊結(jié)束的還是在右邊結(jié)束的 |
| CrossAxisAlignment.center | 在交叉軸上居中對(duì)齊 |
| CrossAxisAlignment.stretch | 要求 子Widget 在交叉軸上填滿 |
| CrossAxisAlignment.baseline | 要求 子Widget 的基線在交叉軸上對(duì)齊 |
textDirection 的取值：子控件在主軸方向上的布局順序
| TextDirection 值 | 簡(jiǎn)述 |
|---|---|
| TextDirection.rtl | 表示從右到左 |
| TextDirection.ltr | 表示從左到右 |
verticalDirection 的取值 ：子控件在交叉軸方向上的布局順序
| VerticalDirection 值 | 簡(jiǎn)述 |
|---|---|
| VerticalDirection.up | 表示從下到上 |
| VerticalDirection.down | 表示從上到下 |
final _colorArr = [
Colors.red,
Colors.purple,
Colors.pink,
Colors.greenAccent,
Colors.orangeAccent,
Colors.grey,
];
Center(
child: Container(
margin: const EdgeInsets.only( top: 50),
color: Colors.pink.shade50,
// alignment: Alignment.center,
height: 300,
width: 300,
child: Flex(
direction: Axis.vertical,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: 50,
width: 50,
color: _colorArr[0],
),
Container(
height: 40,
width: 60,
color: _colorArr[1],
),
Container(
height: 100,
width: 80,
color: _colorArr[2],
),
Container(
height: 30,
width: 100,
color: _colorArr[3],
),
]),
),
)
用這些色塊纹安，可以自己玩一下，很有意思哦
本地Flutter 2.10.1砂豌，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子厢岂，初學(xué)Flutter ，文章會(huì)根據(jù)學(xué)習(xí)進(jìn)度不定時(shí)更新阳距，請(qǐng)多多指教~~
