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

95

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

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свойство?

MistyD
источник

Ответы:

195

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,
    ),
  ],
);
Реми Русселе
источник
2
На 2 - ом примере я использую его settingsRow, который содержитText("right")
Ремигия Русселе
Понимаю. Пропустил эту часть
Гюнтер Цёхбауэр
Спасибо. Но из любопытства, почему мой код не работает? mainAxisAlignmentРебенок не происходит. Обгоняют ли свойства родителей свойства детей?
MistyD
1
Второй вариант намного лучше.
Рагху Мудем
1
@KPradeepKumarReddy Если вы не боитесь, что эти два виджета могут перекрывать друг друга, если их размеры слишком велики, я предлагаю использовать Stack, а затем двух дочерних элементов, завернутых в виджеты Align (один с Alignment.center, другой с Alignment.centerRight). Или создайте три расширенных виджета в строке с помощью flex: 1. Первый будет содержать пустой (SizedBox), второй - ваш центрированный виджет (заключенный в центр), а третий - ваш выровненный по правому краю виджет.
Алексей Семенюк
71

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

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);
Притиш
источник
Что делает Spacer ()? В ряду я хочу, чтобы один виджет находился в центре, а другой - в крайнем правом углу. Возможно ли это с помощью spacer ()?
К. Прадип Кумар Редди,
51

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

С помощью 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
источник
Я хочу, чтобы один виджет был в центре, а другой - в крайнем правом углу. Как мы можем этого добиться?
К. Прадип Кумар Редди,
@KPradeepKumarReddy В этом случае можно использовать хороший подход Stack.
CopsOnRoad,
@KPradeepKumarReddy Я уверен, что на SO уже должен быть такой вопрос, все, что вам нужно сделать, это поиск с правильным ключевым словом. Я не могу показать вам код здесь в комментарии, но идея состоит в том, чтобы использовать Stack, когда его первый дочерний Alignэлемент (справа), а второй может быть Centerили простым Align.
CopsOnRoad,
1

Да CopsOnRoad, верно, через стек вы можете выровнять один по правому краю, а другой по центру.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
пунам калра
источник