Flutter 在极端情况下对齐两项 - 一项在左侧，一项在右侧 [英] Flutter align two items on extremes - one on the left and one on the right

问题描述

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

I am trying to align two items at extremes one on the left and one on the right. I have one row that is aligned to the left and then a child of that row is aligned to the right. However it seems the child row is picking up the alignment property from its parent. This is my code

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

结果我得到了这样的东西

as a result I get something like this

Left Right

我想要的是

Left      Right

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

Also there is enough space on the Row. My question is why is the child Row not exhibiting its MainAxisAlignment.end property ?

推荐答案

使用单个 Row 代替 mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

或者你可以使用扩展

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

这篇关于Flutter 在极端情况下对齐两项 - 一项在左侧，一项在右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！