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),
          ],
        )

mainAxisAlignment为MainAxisAlignment.center

mainAxisAlignment为MainAxisAlignment.end

mainAxisAlignment为MainAxisAlignment.spaceBetween

mainAxisAlignment为MainAxisAlignment.spaceEvenly

mainAxisAlignment为MainAxisAlignment.spaceAround

CrossAxisAlignment

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

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

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)),
          ],
        ),
      ),

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),
          ],
        ),
      )

将mainAxisSize设置为MainAxisSize.min