我试图在左边的一个极端和右边的一个极端对齐两个项目。我有一行与左边对齐,然后该行的子项与右边对齐。但是,子行似乎从其父级中获取了对齐属性。这是我的代码
var SettingsRow = new Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Right",softWrap: true,),
],
);
var nameRow = new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Left"),
SettingsRow,
],
);
结果我得到了这样的东西
Left Right
我想要的是什么
Left Right
Row上还有足够的空间。我的问题是为什么Row不展示其MainAxisAlignment.end
财产?
使用单个Row
代替mainAxisAlignment: MainAxisAlignment.spaceBetween
。
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text("left"),
new Text("right")
]
);
或者你可以使用Expanded
new Row(
children: [
new Text("left"),
new Expanded(
child: settingsRow,
),
],
);
一个简单的解决方案是在两个小部件之间使用Spacer()
Row(
children: [
Text("left"),
Spacer(),
Text("right")
]
);
你可以通过很多方式做到这一点。
使用mainAxisAlignment: MainAxisAlignment.spaceBetween
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlutterLogo(size: 120),
FlutterLogo(size: 120),
],
);
使用Spacer
Row(
children: <Widget>[
FlutterLogo(size: 120),
Spacer(),
FlutterLogo(size: 120),
],
);
使用Expanded
Row(
children: <Widget>[
FlutterLogo(size: 120),
Expanded(child: SizedBox()),
FlutterLogo(size: 120),
],
);
使用Flexible
Row(
children: <Widget>[
FlutterLogo(size: 120),
Flexible(fit: FlexFit.tight, child: SizedBox()),
FlutterLogo(size: 120),
],
);
输出: