使用行（Row）水平排列widget，使用列（Column）垂直排列widget。在行或列中嵌套行或列实现复杂的布局。如下图所示：
此布局按行排列。该行包含两个子布局，左侧一列和右侧的图片
对于行（Row）来说，主轴是水平方向，横轴是垂直方向。对于列（Column）来说，主轴是垂直方向，横轴是水平方向 
使用mainAxisAlignment和crossAxisAlignment属性控制行或列对齐（使用
MainAxisAlignment和CrossAxisAlignment类中的常量）
如下图：3个图像都是100像素，屏幕宽度大于300像素，可以设置主轴对齐方式为spaceEvently，它会在每个图像之前和之后分配空闲的水平空间
代码如下：
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Image.asset('images/pic1.jpg'),
如果要widget按比例占据空间大小，可以将widget放到ExpandedWidget中，ExpandedWidget的flex属性，用于确定widget的弹性系数，默认为1
如下图：创建一个由3个widget组成的行，其中中间widget的宽度是其他两个widget的两倍，将中间widget的弹性系数设置为2
代码如下：
class ExpandedState extends State<ExpandedS> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(title: new Text('ExpandedTest')),
body: new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(child: new Image.asset('images/1.jpg')),
new Expanded(child: new Image.asset('images/2.jpg'), flex: 2,),
new Expanded(child: new Image.asset('images/3.jpg'))
],
),
),
);
}
}
默认情况下，行或列沿着其主轴会占用尽可能多的空间，如果要将widget聚集在一起，可以将mainAxisSize设置为MainAxisSize.min
如下图，将五角星挨个排列，而不是分散占成一行
---------------------
作者：Super_666
来源：CSDN
原文：https://blog.csdn.net/Super_666/article/details/81334895
版权声明：本文为博主原创文章，转载请附上博文链接！