Я хочу иметь серию кнопок, как на прикрепленном изображении.
Ниже приведен мой код, но различные кнопки расположены не близко друг к другу.
Я попробовал обернуть каждую кнопку виджетом Expanded
, но выдает ошибку:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
потому что высота отсутствует.
Обертывание всего в Container
с высотой работает, но я не хочу указывать высоту, потому что мне нужно использовать несколько подобных виджетов с переменным количеством кнопок.
Как мне это решить? Заранее спасибо!
Column(
children: <Widget>[
FilledButton.icon(
onPressed: () {},
icon: const Icon(Icons.arrow_forward),
iconAlignment: IconAlignment.end,
label: const Align(
alignment: Alignment.centerLeft,
child: Text("Item A"),
),
style: FilledButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
),
),
),
const Divider(height: 0, indent: 0, thickness: 1),
FilledButton.icon(
onPressed: () {},
icon: const Icon(Icons.arrow_forward),
iconAlignment: IconAlignment.end,
label: const Align(
alignment: Alignment.centerLeft,
child: Text("Item B"),
),
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
),
),
const Divider(height: 0, indent: 0, thickness: 1),
FilledButton.icon(
onPressed: () {},
icon: const Icon(Icons.arrow_forward),
iconAlignment: IconAlignment.end,
label: const Align(
alignment: Alignment.centerLeft,
child: Text("Item C"),
),
style: FilledButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(12)),
),
),
),
],
),
@DroidFlutter это не сближает виджеты, а просто выравнивает пространство
Добавить Spacer()
последним виджетом в столбце?
Разве это не дополнительное пространство от самого FilledButton? Вы можете попробовать поиграться со свойствами ButtonStyle: VisualDensity, Padding, TapTargetSize.
Запуск вашего кода в Dart Pad фактически отображает кнопки близко друг к другу, а это означает, что проблема может быть выше в дереве виджетов. Кажется, что Column
не имеет ограничений по высоте, поэтому я предполагаю, что он находится в режиме прокрутки. Вы можете попробовать установить mainAxisSize
на MainAxisSize.min
и посмотреть, сработает ли это.
@Dhafin Rayhan большое спасибо! tapTargetSize: MaterialTapTargetSize.shrinkWrap
решил мою проблему!
Чтобы решить эту проблему, вам нужно следующее свойство в каждой кнопке:
style: FilledButton.styleFrom(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
...
),
Попробуйте передать mainAxisAlignment: MainAxisAlignment.spaceBetween основному столбцу.