Row Column
参考:
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