Во Flutter создание ряда кнопок с одинаковым интервалом является распространенным требованием для создания интуитивно понятных пользовательских интерфейсов. В этой статье мы рассмотрим несколько методов достижения такого макета на примерах кода. К концу вы получите полное представление о различных подходах к равномерному расположению кнопок во Flutter.

Метод 1: MainAxisAlignment.spaceEvenly

Свойство MainAxisAlignment.spaceEvenly виджета «Строка» позволяет равномерно распределять доступное пространство между кнопками. Вот пример фрагмента кода:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    RaisedButton(
      child: Text('Button 1'),
      onPressed: () {},
    ),
    RaisedButton(
      child: Text('Button 2'),
      onPressed: () {},
    ),
    RaisedButton(
      child: Text('Button 3'),
      onPressed: () {},
    ),
  ],
)

Метод 2: расширенные виджеты

Используя расширенные виджеты внутри строки, вы можете равномерно распределить доступное пространство между кнопками. Вот пример:

Row(
  children: [
    Expanded(
      child: RaisedButton(
        child: Text('Button 1'),
        onPressed: () {},
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Button 2'),
        onPressed: () {},
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Button 3'),
        onPressed: () {},
      ),
    ),
  ],
)

Метод 3: виджеты-разделители

Вы также можете использовать виджеты Spacer, чтобы равномерно распределить пространство между кнопками. Вот пример:

Row(
  children: [
    RaisedButton(
      child: Text('Button 1'),
      onPressed: () {},
    ),
    Spacer(),
    RaisedButton(
      child: Text('Button 2'),
      onPressed: () {},
    ),
    Spacer(),
    RaisedButton(
      child: Text('Button 3'),
      onPressed: () {},
    ),
  ],
)

Метод 4: гибкие виджеты

Используя виджеты Flex, вы можете создавать гибкие макеты, которые распределяют пространство в соответствии с указанными факторами гибкости. Вот пример:

Row(
  children: [
    Flexible(
      flex: 1,
      child: RaisedButton(
        child: Text('Button 1'),
        onPressed: () {},
      ),
    ),
    Flexible(
      flex: 1,
      child: RaisedButton(
        child: Text('Button 2'),
        onPressed: () {},
      ),
    ),
    Flexible(
      flex: 1,
      child: RaisedButton(
        child: Text('Button 3'),
        onPressed: () {},
      ),
    ),
  ],
)

В этой статье мы рассмотрели различные способы равномерного расположения кнопок в ряду во Flutter. Используя такие свойства, как MainAxisAlignment.spaceEvenly, расширенные виджеты, виджеты-разделители и виджеты Flex, вы можете легко добиться желаемого макета. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим конкретным потребностям в дизайне пользовательского интерфейса.