MainAxisAlignment和CrossAxisAlignment簡(jiǎn)介

MainAxisAlignment（主軸）和CrossAxisAlignment（交叉軸）常用于Row和Column控件中，主要是用來控制子控件排列的位置，并可以配合textDirection和verticalDirection屬性來控制子控件排列的方向及改變MainAxisAlignment和CrossAxisAlignment的起始位置。

簡(jiǎn)單來說

MainAxisAlignment（主軸）就是與當(dāng)前控件方向一致的軸，而CrossAxisAlignment（交叉軸）就是與當(dāng)前控件方向垂直的軸在水平方向控件中，例如Row

MainAxisAlignment是水平的，默認(rèn)起始位置在左邊，排列方向?yàn)閺淖笾劣?，此時(shí)可以通過textDirection來改變MainAxisAlignment的起始位置和排列方向

CrossAxisAlignment是垂直的，默認(rèn)起始位置在中間，排列方向?yàn)閺纳现料?，此時(shí)可以通過verticalDirection來改變CrossAxisAlignment的起始位置及排列方向

在垂直方向的控件中，例如Column

MainAxisAlignment是垂直的，默認(rèn)起始位置在上邊，排列方向?yàn)閺纳现料拢藭r(shí)可以通過verticalDirection來改變MainAxisAlignment的起始位置及排列方向

CrossAxisAlignment是水平的，默認(rèn)起始位置在中間，此時(shí)可以通過textDirection來改變CrossAxisAlignment的起始位置

MainAxisAlignment

MainAxisAlignment是一個(gè)枚舉類型，代碼如下

enum MainAxisAlignment {

//將子控件放在主軸的開始位置

? start,?

? //將子控件放在主軸的結(jié)束位置

? end,

? //將子控件放在主軸的中間位置

? center,

? //將主軸空白位置進(jìn)行均分，排列子元素，手尾沒有空隙

? spaceBetween,

? //將主軸空白區(qū)域均分，使中間各個(gè)子控件間距相等，首尾子控件間距為中間子控件間距的一半

? spaceAround,

? //將主軸空白區(qū)域均分，使各個(gè)子控件間距相等

? spaceEvenly,

}

我們先寫一個(gè)帶漸變的正方形

/*

* 一個(gè)帶漸變顏色的正方形

* */

class Box extends StatelessWidget {

? String index;

? double boxSize=100;

? Box(String index) {

? ? this.index = index;

? }

? @override

? Widget build(BuildContext context) {

? ? return Container(

? ? ? width: boxSize,

? ? ? height: boxSize,

? ? ? alignment: Alignment.center,

? ? ? decoration: BoxDecoration(

? ? ? ? gradient: LinearGradient(

? ? ? ? ? ? colors: [Colors.orangeAccent, Colors.orange, Colors.deepOrange]),

? ? ? ),

? ? ? child: Text(

? ? ? ? index,

? ? ? ? style: TextStyle(

? ? ? ? ? color: Colors.white,

? ? ? ? ? fontSize: 20,

? ? ? ? ? fontWeight: FontWeight.bold,

? ? ? ? ),

? ? ? ),

? ? );

? }

}

長(zhǎng)這樣

在Row中MainAxisAlignment的效果

前面我們說到了，在水平方向的控件中，MainAxisAlignment就是水平的，其默認(rèn)的方向是從左到右，也就是說默認(rèn)的起始位置在左邊，我們可以通過textDirection來改變水平方向的起始位置。

下面我們先來放三個(gè)正方形，看看默認(rèn)的效果

Container(

? ? ? width: double.infinity,

? ? ? height: 500,

? ? ? margin: EdgeInsets.all(10),

? ? ? decoration: BoxDecoration(

? ? ? ? border: Border.all(

? ? ? ? ? color: Colors.black,

? ? ? ? ? width: 1,

? ? ? ? ),

? ? ? ),

? ? ? child: Row(

? ? ? ? children: <Widget>[

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? ),

? ? );

MainAxisAlignment.start

mainAxisAlignment的默認(rèn)值就是MainAxisAlignment.start，當(dāng)我們不設(shè)置textDirection屬性時(shí)，默認(rèn)就是從左至右的方向，起始位置就是在左邊的

如下

我們更改一下textDirection的值為從右至左

textDirection: TextDirection.rtl,

可以看到，水平方向的起始位置就變成了右邊，子控件排列的方向就變成了從右至左進(jìn)行排列，后面的值就不在演示該屬性了，可自行嘗試

MainAxisAlignment.center

將子控件放在主軸的中間位置

MainAxisAlignment.end

將子控件放在主軸的結(jié)束位置

MainAxisAlignment.spaceAround

將主軸空白區(qū)域均分，使中間各個(gè)子控件間距相等，首尾子控件距邊緣間距為中間子控件間距的一半

MainAxisAlignment.spaceBetween

將主軸空白位置進(jìn)行均分，排列子元素，首尾子控件距邊緣沒有間隙

MainAxisAlignment.spaceEvenly

將主軸空白區(qū)域均分，使各個(gè)子控件間距相等

在Column中MainAxisAlignment的效果

在垂直方向的控件中，MainAxisAlignment就是垂直的，此時(shí)可以通過verticalDirection來改變MainAxisAlignment的起始位置及排列方向

例如

Container(

? ? ? width: double.infinity,

? ? ? height: 500,

? ? ? margin: EdgeInsets.all(10),

? ? ? decoration: BoxDecoration(

? ? ? ? border: Border.all(

? ? ? ? ? color: Colors.black,

? ? ? ? ? width: 1,

? ? ? ? ),

? ? ? ),

? ? ? child: Column(

? ? ? ? mainAxisAlignment: MainAxisAlignment.start,

? ? ? ? children: <Widget>[

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? ),

? ? );

MainAxisAlignment.start

將子控件放在主軸的開始位置，默認(rèn)值即為start，verticalDirection的默認(rèn)值為VerticalDirection.down，也就是從上至下的方向

下面我們來修改verticalDirection的值為up

Column(

? ? ? ? mainAxisAlignment: MainAxisAlignment.start,

? ? ? ? verticalDirection: VerticalDirection.up,

? ? ? ? children: <Widget>[

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? ),

可以看到，垂直方向的起始位置就變成了下邊，子控件排列的方向就變成了從下至上進(jìn)行排列，后面的值就不再演示該屬性了，可自行嘗試

MainAxisAlignment.center

將子控件放在主軸的中間位置

MainAxisAlignment.end

將子控件放在主軸的結(jié)束位置

MainAxisAlignment.spaceAround

將主軸空白區(qū)域均分，使中間各個(gè)子控件間距相等，首尾子控件距邊緣間距為中間子控件間距的一半

MainAxisAlignment.spaceBetween

將主軸空白位置進(jìn)行均分，排列子元素，首尾子控件距邊緣沒有間隙

MainAxisAlignment.spaceEvenly

將主軸空白區(qū)域均分，使各個(gè)子控件間距相等

CrossAxisAlignment

前面我們已經(jīng)說了，在Row（水平排列）控件中，CrossAxisAlignment的方向就是垂直的，在 Column（垂直排列）控件中，CrossAxisAlignment的方向就是水平的。

enum CrossAxisAlignment {

//將子控件放在交叉軸的起始位置

? start,

//將子控件放在交叉軸的結(jié)束位置

? end,

//將子控件放在交叉軸的中間位置

? center,

//使子控件填滿交叉軸

? stretch,

//將子控件放在交叉軸的上，并且與基線相匹配（不常用）

? baseline,

}

在Row中CrossAxisAlignment的效果

mainAxisAlignment的默認(rèn)值是MainAxisAlignment.start，我們來看看CrossAxisAlignment不同的值顯示效果是什么樣的

CrossAxisAlignment.start

將子控件放在交叉軸的起始位置

此時(shí)，我們可以通過verticalDirection來控制交叉軸的起始位置及排列方向。

Row(

? ? ? ? crossAxisAlignment: CrossAxisAlignment.start,

? ? ? ? verticalDirection: VerticalDirection.up,

? ? ? ? children: <Widget>[

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? )

可以看到，交叉軸的排列方向修改為從下至上，起始位置也變成了下方。下面其他的值效果類似，就不演示verticalDirection了

CrossAxisAlignment.center

將子控件放在交叉軸的中間位置，同樣的可以通過TextDirection來指定起始位置

CrossAxisAlignment.end

將子控件放在交叉軸的結(jié)束位置

CrossAxisAlignment.stretch

使子控件填滿交叉軸

在Column中CrossAxisAlignment的效果

Column(

? ? ? ? children: <Widget>[

? ? ? ? ? Box("1"),

? ? ? ? ? Box("2"),

? ? ? ? ? Box("3"),

? ? ? ? ],

? ? ? ),

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

CrossAxisAlignment.stretch

總結(jié)

MainAxisAlignment和CrossAxisAlignment他們的值并不多，理解起來也比較簡(jiǎn)單，配合textDirection和verticalDirection基本上可以滿足我們的需求了。

關(guān)于textDirection和verticalDirection我們不必死記硬背Row中是誰(shuí)控制誰(shuí)，在Column中是誰(shuí)控制誰(shuí)

我們只需要記住

textDirection就是用來控制水平方向的起始位置和排列方向

verticalDirection就是用來控制垂直方向的起始位置和排列方向

然后記住

MainAxisAlignment（主軸）就是與當(dāng)前控件方向一致的軸

CrossAxisAlignment（交叉軸）就是與當(dāng)前控件方向垂直的軸

記住了這兩點(diǎn)，基本上MainAxisAlignment和CrossAxisAlignment就沒什么問題了