-
Row：橫向布局X -- 右- 子Widget按照主軸方向（從左-->右）橫向排列，
- 父Widget的
alignment的X值對Row布局沒有影響
-
Column：縱向布局Y -- 下- 子Widget按照主軸方向（從上-->下）縱向排列，
- 父Widget的
alignment的Y值對Column布局沒有影響
主軸 MainAxisAlignment
-
spaceBetween:剩下的空間平均分布到小部件之間?。?/li> -
spaceAround:剩下的空間平均分布到小部件周圍??！ -
spaceEvenly：剩下的空間和小部件一起平均分?。?/li> -
start：向主軸開始的方向對齊。 -
end：向主軸結束的方向對齊。 -
center：主軸方向居中對齊。
image.png
交叉軸：CrossAxisAlignment 垂直于主軸方向
-
baseline：文字底部對齊- 必須配合
textBaseline一起使用
- 必須配合
-
center：交叉軸方向居中對齊。 -
end：向交叉軸結束的方向對齊。； -
start：向交叉軸開始的方向對齊； -
stretch：填滿交叉軸方向；
image.png
Expanded 填充布局
- 在主軸方向不會剩下間隙。將被Expanded包裝的部件進行拉伸和壓縮
- 主軸橫向，寬度設置沒有意義
- 主軸縱向，高度設置沒有意義
- 當Text被Expanded包裝后，文字可以自動換行
image.png
TextDirection
只能改變Row的主軸方向！
image.png
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
alignment: const Alignment(0.0, 0.0),
//spaceBetween: 剩下的空間平均分布到小部件之間！！
//spaceAround: 剩下的空間平均分布到小部件周圍??！
//spaceEvenly：剩下的空間和小部件一起平均分！！
//Expanded:在主軸方向不會剩下間隙。將被Expanded拉伸。
child: Row(
textDirection: TextDirection.ltr, //在Row布局中改變主軸方向！
mainAxisAlignment: MainAxisAlignment.center, //主軸
crossAxisAlignment: CrossAxisAlignment.stretch,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
child: const Text(
'你好hello',
style: TextStyle(fontSize: 15),
),
color: Colors.red),
Container(
child: const Text(
'哎aiyo',
style: TextStyle(fontSize: 15),
),
color: Colors.blue),
Container(
child: const Text(
'哎aiyo',
style: TextStyle(fontSize: 15),
),
color: Colors.white),
],
),
);
}
}
