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

flutter flutter-layout

— 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"),
      )
    ],
  )

— пунам калра
источник

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