介紹
Row：在水平方向上排列子widget的列表，屬于多子元素容器衡未。
Column：在垂直方向上排列子widget的列表尸执，屬于多子元素容器。
他們的父類都是Flex組件缓醋，根據(jù)Flex設(shè)置方向?yàn)樗交蛘叽怪保陀辛薘ow和Column绊诲。
注意：這兩個組件自身不帶滾動屬性送粱，如果超出了一行，在debug下面則會顯示溢出的提示掂之】苟恚可以在外層套一個SingleChildScrollView之類的組件使它們可以滾動脆丁。
屬性
- direction
設(shè)置主軸方向，可設(shè)置的值為 Axis.horizontal 和 Axis.vertical动雹，交叉軸與主軸方向垂直槽卫。 - mainAxisAlignment
設(shè)置子 Widget 沿著主軸方向的排列方式，默認(rèn) MainAxisAlignment.start胰蝠，可設(shè)置的方式如下：
- MainAxisAlignment.start：左對齊歼培，默認(rèn)值;
- MainAxisAlignment.end：右對齊;
- MainAxisAlignment.center：居中對齊;
- MainAxisAlignment.spaceBetween：兩端對齊;
- MainAxisAlignment.spaceAround：每個 Widget 兩側(cè)的間隔相等，與屏幕邊緣的間隔是其他 Widget 之間間隔的一半;
-
MainAxisAlignment.spaceEvenly：平均分布各個 Widget茸塞，與屏幕邊緣的間隔與其他 Widget 之間的間隔相等躲庄；
對比效果如下：
- mainAxisSize
設(shè)置主軸的大小，默認(rèn) MainAxisSize.max钾虐，可設(shè)置的值如下：
- MainAxisSize.max：主軸的大小是父容器的大性刖健；
-
MainAxisSize.min：主軸的大小是其子 Widget 大小之和效扫；
對比效果如下：
- crossAxisAlignment
設(shè)置子 Widget 沿著交叉軸方向的排列方式倔监，默認(rèn) CrossAxisAlignment.center，可設(shè)置的方式如下：
- CrossAxisAlignment.start：與交叉軸的起始位置對齊菌仁；
- CrossAxisAlignment.end：與交叉軸的結(jié)束位置對齊丐枉；
- CrossAxisAlignment.center：居中對齊；
- CrossAxisAlignment.stretch：填充整個交叉軸掘托；
-
CrossAxisAlignment.baseline：按照基線對齊瘦锹；
對比效果如下：
- textDirection
決定水平方向上的擺放順序，設(shè)置方式如下：
- TextDirection.ltr：從左到右擺放
- TextDirection.rtl：從右到左擺放
- verticalDirection
設(shè)置垂直方向上的子 Widget 的排列順序闪盔，默認(rèn)為 VerticalDirection.down弯院，設(shè)置方式如下：
- VerticalDirection.down：start 在頂部，end 在底部泪掀；
- VerticalDirection.up：start 在底部听绳，end 在頂部。
- textBaseline
設(shè)置文字對齊的基線類型异赫，可設(shè)置的值如下：
- TextBaseline.alphabetic：與字母基線對齊椅挣；
- TextBaseline.ideographic：與表意字符基線對齊；
使用時(shí)當(dāng) crossAxisAlignment 設(shè)置為 baseline 時(shí)塔拳，必須設(shè)置 textBaseline 屬性的值
- clipBehavior
當(dāng)子組件超出容器時(shí)的裁剪行為鼠证，設(shè)置方式如下：
- Clip.none：不裁剪
- Clip.hardEdge：裁剪
- Clip.antiAlias：裁剪，抗鋸齒
- Clip.antiAliasWithSaveLayer：裁剪靠抑，抗鋸齒
Expanded和Flexible
- fit屬性
Flexible 的 fit 屬性默認(rèn)為 FlexFit.loose量九，而 Expanded 繼承 Flexible，其 fit 屬性指定為 FlexFit.tight，可設(shè)置的 fit 屬性如下：
- tight：強(qiáng)制填充可利用的空間荠列；
- loose：不強(qiáng)制填充可利用空間类浪，Widget自身大小。
-
flex屬性
Flexible 的 flex屬性是彈性系數(shù)
對比效果如下：
Expanded 可以使 Row肌似、Column费就、Flex 里面的組件填充沿著主軸可利用的空間，如果多個 Widget 都使用了 Expanded 組件川队，可以使用 Expanded 的 flex 屬性按照比例分配主軸空間力细，flex 屬性相當(dāng)于 Android LinearLayout 的 weight 屬性
示例代碼如下：
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: 50,
height: 50,
color: Colors.red,
child: const Center(
child: Text(
"A",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Expanded(
flex: 2,
child: Container(
width: 50, // Row Expanded下width無效
height: 50, // Column Expanded下height無效
color: Colors.green,
child: const Center(
child: Text(
"B",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
child: const Center(
child: Text(
"C",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)),
],
);
顯示效果如下：
Spacer
Spacer 用來調(diào)節(jié) Widget 之間的間距，其本質(zhì)也是build了一個Expanded組件呼寸。會占據(jù)所有的剩余空間艳汽，因此 MainAxisAlignment 的設(shè)置將無效，Spacer 的屬性 flex 用于設(shè)置剩余空間的分配權(quán)重对雪，默認(rèn)值為 1河狐，表示占據(jù)所有剩余空間，如果兩個以上 Spacer 則按照 flex 分配剩余空間
示例代碼：
Row(
children: <Widget>[
Container(
width: 80,
height: 80,
color: Colors.red,
),
const Spacer(
flex: 1,
),
Container(
width: 80,
height: 80,
color: Colors.green,
),
const Spacer(
flex: 2,
),
Container(
width: 80,
height: 80,
color: Colors.yellow,
),
],
);
運(yùn)行效果如下：
以上就是Row和Column組件的基本介紹瑟捣。以及結(jié)合Expanded和Spacer來布局的例子
