Чтобы отображать кнопки рядом во Flutter, вы можете использовать несколько методов. Вот некоторые из наиболее распространенных подходов:
- Виджет «Строка». Виджет «Строка» позволяет располагать виджеты горизонтально. Вы можете разместить кнопки внутри виджета «Строка» и соответствующим образом настроить их свойства, такие как выравнивание, интервал и размер.
Row(
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
SizedBox(width: 10), // Adjust the spacing between buttons
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
)
- Виджет переноса: виджет переноса полезен, когда у вас есть несколько кнопок и вы хотите, чтобы они переносились на следующую строку, если недостаточно места по горизонтали. Он автоматически настраивает макет в зависимости от доступного места.
Wrap(
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
)
- Виджет ButtonBar. Виджет ButtonBar специально разработан для отображения кнопок рядом с заранее заданными стилями и интервалами.
ButtonBar(
children: [
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
)
- Гибкость настройки: вы можете использовать комбинацию гибких и расширенных виджетов, чтобы добиться индивидуального размера и интервала для кнопок.
Row(
children: [
Flexible(
child: ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
),
SizedBox(width: 10), // Adjust the spacing between buttons
Expanded(
child: ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
),
],
)