Flutter выравнивает два предмета по крайностям - один слева и один справа
Я пытаюсь выровнять два элемента в крайних точках слева и один справа. У меня есть одна строка, выровненная слева, а потом дочерняя строка этой строки выровнена вправо. Однако кажется, что дочерняя строка выбирает свойство выравнивания из своего родителя. Это мой код
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
Также на Строке достаточно места. Мой вопрос в том, почему ребенок Row не MainAxisAlignment.end
свойством MainAxisAlignment.end
?
Ответы
Ответ 1
Вместо этого используйте одну 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
Простым решением было бы использовать Spacer()
между двумя виджетами
Row(
children: [
Text("left"),
Spacer(),
Text("right")
]
);
Ответ 3
Вы можете сделать это разными способами.
Использование 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(),
],
);
Выход: