Row Column

参考：

Row class
Flutter Layout Cheat Sheet
Flutter — Row/Column Cheat Sheet

mainAxisAlignment和crossAxisAlignment

属性mainAxisAlignment和crossAxisAlignment

mainAxisAlignment - 表示的是主轴的对齐方式
crossAxisAlignment - 表示的是次轴的对齐方式

对Row来说，水平方向是主轴，垂直方向是次轴
对Column来说，垂直方向是主轴，水平方式是次轴

MainAxisAlignment

以Row来举例说明

Row的mainAxisAlignment默认值为MainAxisAlignment.start，crossAxisAlignment默认值为CrossAxisAlignment.center

如下的例子：

      body: Row(children: <Widget>[Container(width: 100, height: 100, color: Colors.red),Container(width: 100, height: 200, color: Colors.green),Container(width: 100, height: 300, color: Colors.blue),],)

start
mainAxisAlignment为MainAxisAlignment.center

center
mainAxisAlignment为MainAxisAlignment.end

end
mainAxisAlignment为MainAxisAlignment.spaceBetween

spaceBetween
mainAxisAlignment为MainAxisAlignment.spaceEvenly

spaceEvenly
mainAxisAlignment为MainAxisAlignment.spaceAround

spaceAround

CrossAxisAlignment

CrossAxisAlignment的start、center、end与MainAxisAlignment基本类似

当crossAxisAlignment为CrossAxisAlignment.stretch时，会填充cross axis

stretch
CrossAxisAlignment.baseline

如下，Row中有字体大小不同的Text

      body: Container(color: Colors.yellow,child: Row(children: <Widget>[Text('Flutter',style: TextStyle(color: Colors.red, fontSize: 40.0),),Text('Flutter',style: TextStyle(color: Colors.blue, fontSize: 20.0)),],),)

文字没对齐
如果想要文件沿着baseline基线对齐，需使用TextBaseline和CrossAxisAlignment.baseline

      body: Container(color: Colors.yellow,child: Row(crossAxisAlignment: CrossAxisAlignment.baseline,textBaseline: TextBaseline.alphabetic,children: <Widget>[Text('Flutter',style: TextStyle(color: Colors.red, fontSize: 40.0),),Text('Flutter',style: TextStyle(color: Colors.blue, fontSize: 20.0)),],),),

baseline

MainAxisSize

Row组件中mainAxisSize的默认值为MainAxisSize.max

给Row设置一个背景颜色，参考How to set the background color of a Row() in Flutter?，将Row放在Container中，给Container设置背景颜色为Colors.yellow

      body: Container(color: Colors.yellow,child: Row(mainAxisAlignment: MainAxisAlignment.start,mainAxisSize: MainAxisSize.max,children: <Widget>[Container(width: 100, height: 100, color: Colors.red),Container(width: 100, height: 200, color: Colors.green),Container(width: 100, height: 300, color: Colors.blue),],),)