Flutter组件左右两端对齐问题：子Row的MainAxisAlignment.end未生效

嘿，我来帮你搞清楚为啥子Row的MainAxisAlignment.end没生效，以及怎么实现你要的两端对齐效果！

问题原因 #

你遇到的核心问题是：子Row在父Row里没有获得足够的可用空间。虽然你给子Row设置了mainAxisSize: MainAxisSize.max，但父Row的MainAxisAlignment.start会让它的子组件（也就是Text("Left")和SettingsRow）按顺序紧凑排列，子Row默认只会占据自身内容需要的宽度，根本没机会展开到最大宽度，那MainAxisAlignment.end自然就看不出效果啦——毕竟内容已经占满了它的宽度，对齐方式也就无从体现。

几种可行的解决方案 #

方案1：用Spacer()分隔（最简单）

在父Row的两个子组件之间加一个Spacer()，它会自动占据父Row的剩余空间，直接把右边的组件挤到最右端：

var SettingsRow = Row(
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: const <Widget>[
    Text("Right", softWrap: true),
  ],
);

var nameRow = Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: const <Widget>[
    Text("Left"),
    Spacer(), // 加这个就搞定！
    SettingsRow,
  ],
);

方案2：给子Row套Expanded

让子Row占据父Row的剩余空间，这样它的MainAxisAlignment.end就能生效，把内部的Text推到最右边：

var SettingsRow = Row(
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: const <Widget>[
    Text("Right", softWrap: true),
  ],
);

var nameRow = Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: const <Widget>[
    Text("Left"),
    Expanded(child: SettingsRow), // 用Expanded包裹子Row
  ],
);

方案3：直接给父Row用MainAxisAlignment.spaceBetween（最简洁）

其实你完全不需要嵌套Row，直接给父Row设置MainAxisAlignment.spaceBetween，就能让两个Text自动分别对齐左右两端，代码更简洁：

var nameRow = Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 直接用这个对齐方式
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: const <Widget>[
    Text("Left"),
    Text("Right", softWrap: true),
  ],
);

这三种方法都能实现你要的「Left Right」两端对齐效果，选哪种看你的实际场景需求就行～

内容的提问来源于stack exchange，提问作者MistyD