-
Row：横向布局X -- 右- 子Widget按照主轴方向（从左-->右）横向排列，
- 父Widget的
alignment的X值对Row布局没有影响
-
Column：纵向布局Y -- 下- 子Widget按照主轴方向（从上-->下）纵向排列，
- 父Widget的
alignment的Y值对Column布局没有影响
主轴 MainAxisAlignment
-
spaceBetween:剩下的空间平均分布到小部件之间！！ -
spaceAround:剩下的空间平均分布到小部件周围！！ -
spaceEvenly：剩下的空间和小部件一起平均分！！ -
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),
],
),
);
}
}
