Флаттер вирівнює два предмети за крайніми місцями - один зліва та другий справа

Я намагаюся вирівняти два елементи в крайніх випадках, один зліва та один справа. У мене є один рядок, який вирівняний ліворуч, а потім дочірній бік цього рядка вирівняний праворуч. Однак, схоже, дочірній рядок забирає властивість вирівнювання у свого батька. Це мій код

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майно?

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

Вихід :

Так CopsOnRoad, правильно, через стек ви можете вирівняти один праворуч, а інший по центру.

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