Flutter 在极端情况下对齐两项 - 一项在左侧，一项在右侧答案

【问题标题】：Flutter align two items on extremes - one on the left and one on the rightFlutter 在极端情况下对齐两项 - 一项在左侧，一项在右侧
【发布时间】：2018-10-26 04:57:15
【问题描述】：

我正在尝试将两个极端对齐，一个在左侧，一个在右侧。我有一行左对齐，然后该行的一个子行右对齐。但是，似乎子行正在从其父行获取对齐属性。这是我的代码

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 属性？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

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

【讨论】：

在第二个例子中，我使用了他的settingsRow，其中包含Text("right")
我明白了。错过了那部分
谢谢。但出于好奇，为什么我的代码不起作用？孩子的mainAxisAlignment 不会出现。父母的财产是否超过了孩子的财产？
第二个好多了。
@KPradeepKumarReddy 如果您不担心这两个小部件的尺寸太大可能会相互重叠，我建议使用 Stack 和两个包裹在 Align 小部件中的子部件（一个带有 Alignment.center，另一个一个带有 Alignment.centerRight）。或者，在您的行中使用 flex 在您的行中有三个展开的小部件：1. 第一个将包含空白 (SizedBox)，第二个 - 您的居中小部件（包裹在 Center 中），第三个包含您的右对齐小部件。

【解决方案2】：

一个简单的解决方案是在两个小部件之间使用Spacer()

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

【讨论】：

Spacer() 是做什么的？连续，我想把一个小部件放在中间，另一个放在最右边。这可以使用 spacer() 吗？
我的评论可能与该问题无关，但如果您有 4 个小部件，并且您希望左侧有 3 个，右侧有 1 个，那么@Pritish 的回答会很棒。在第三个和第四个小部件之间添加 Spacer() 就可以了。
这真的很好，因为它允许我使用超过 2 个小部件来完成它
使用Wrap时怎么办？

【解决方案3】：

您可以通过多种方式做到这一点。

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

输出：

【讨论】：

我想要一个小部件在中心，另一个在最右边。我们怎样才能做到这一点？
@KPradeepKumarReddy 在这种情况下，一个好的方法是使用Stack。
@KPradeepKumarReddy 我敢肯定在 SO 上一定已经有这样的问题，您需要做的就是使用正确的关键字进行搜索。我无法真正在评论中向您展示代码，但想法是使用Stack，它的第一个孩子是Align（右），第二个可能是Center 或简单的Align。跨度>

【解决方案4】：

是的CopsOnRoad 是对的，通过堆栈您可以将一个在右侧对齐，另一个在中心对齐。

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

【讨论】：

默认对齐方式为Alignment.center，因此您可以在第二个Align 小部件中省略它。

【解决方案5】：

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

【讨论】：