У меня есть карта, в которой в первой строке этой карты будет 2 элемента текста.
Я хотел бы разместить элемент в самом начале, а затем следующий элемент прямо в центре.
Я поиграл с MainAxisAlignment, но ничего не подходит для этого сценария, например, если я использую MainAxisAlignment.spaceBetween, то каждый элемент помещается в конец строк.
Есть ли очевидный способ, как это сделать?
Спасибо
Вы можете использовать виджет Распорка, чтобы заполнить доступное место в строке:
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SpacedRow(),
),
),
),
);
}
}
class SpacedRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(width: 50, height: 50, color: Colors.red),
Spacer(),
Container(width: 50, height: 50, color: Colors.yellow),
Spacer(),
],
);
}
}
Производит:
Вы можете использовать Spacer()
, Expanded()
, Flexible()
, MainAxisAlignment.spaceBetween
, но здесь вам может потребоваться предоставить padding
. Есть много способов добиться этого. Если вы можете поделиться снимком экрана или кодом, мы можем опубликовать соответствующий код.
Хотя ответ Джордана дал то, что упоминалось в вопросе, желтый блок не выглядит точно по центру. Я пробовал что-то вроде следующего
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Image.asset(
"images/toolbar_logo.webp",
width: 80,
height: 50,
),
],
),
IconButton(
icon: Icon(Icons.navigation),
onPressed: () {},
iconSize: 20,
),
],
),
Можете ли вы предоставить изображение того, как вы хотите, чтобы макет выглядел? Я предполагаю, что вы могли бы просто разместить пустой виджет в конце с помощью
spaceBetween
, но все равно будет хорошо видеть, что именно вы хотите.