Флаттер выровняйте два элемента по крайностям - один слева и один справа

Question

Я пытаюсь выровнять два элемента в крайнем случае, один слева и один справа.У меня есть один ряд, который выровнен по левому краю, а затем дочерний элемент этого ряда выровнен по правому краю.Однако кажется, что дочерняя строка выбирает свойство выравнивания из своего родителя.Это мой код

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?

Answer 1

Простым решением будет использование Spacer() между двумя виджетами

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

Answer 2

Вы можете сделать это разными способами.

Использование 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(),
  ],
);

---

Выход :

Answer 3

Вместо этого используйте один 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,
    ),
  ],
);