扑动对齐两个极端的项目-一个在左边，一个在右边

我试图在极端情况下排列两个项目，一个在左边，一个在右边。 我有一个向左对齐的行，然后该行的一个子行向右对齐。但似乎子行正在从其父行拾取对齐属性。这是我的原则

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

行上也有足够的空间。我的问题是为什么子行没有展示它的 MainAxisAlignment.end属性？

144227 次浏览
小开
最佳答案

使用单个 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(),
FlutterLogo(),
],
);

使用 Spacer

Row(
children: <Widget>[
FlutterLogo(),
Spacer(),
FlutterLogo(),
],
);

使用 Expanded

Row(
children: <Widget>[
FlutterLogo(),
Expanded(child: SizedBox()),
FlutterLogo(),
],
);

使用 Flexible

Row(
children: <Widget>[
FlutterLogo(),
Flexible(fit: FlexFit.tight, child: SizedBox()),
FlutterLogo(),
],
);

产出 :

enter image description here

小开

是的 CopsOnRoad是正确的，通过堆栈你可以对齐一个在右边和其他在中心。

Stack(
children: [
Align(
alignment: Alignment.centerRight,
child: Text("right"),
),
Align(
alignment: Alignment.center,
child: Text("center"),
)
],
)
小开

使用行中的代码行 mainAxisAlignment: MainAxisAlignment.spaceBetween,。这将允许小部件处于两个极端。但是，如果您正在处理 TextField，则使用装饰类和属性前缀 * * * 和后缀 * * * 代替

小开

使用 Flexing小部件

Row(
children: [
Text(
'1',
style: TextStyle(
fontSize: 18, color: Colors.black),
),
Flexible(fit: FlexFit.tight, child: SizedBox()),
Text(
'10',
style: TextStyle(
fontSize: 18, color: Colors.black),
),
],
),
小开

我有 在我的行中有多个条目，但接受的答案对我不起作用。
我需要 在 Align中包装最后一个条目。

我有:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
...allMyLeftAlignedChildren,
Expanded(
child: myRightAlignedChild,

我需要:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
...allMyLeftAlignedChildren,
Expanded(
child: Align(                       // <---  these 2 lines fixed it
alignment: Alignment.centerRight, // <---  these 2 lines fixed it
child: myRightAlignedChild,

提交答案