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

Метод 1: использование виджета «Строка»
Самый простой подход — использовать виджет «Строка» для выравнивания TextFormFields по горизонтали. Вот пример:

Row(
  children: [
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 1',
        ),
      ),
    ),
    SizedBox(width: 10), // Add spacing between fields
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 2',
        ),
      ),
    ),
  ],
)

Метод 2: использование виджета Flex
Другой способ выровнять поля TextFormFields в строке — использование виджета Flex. Этот подход обеспечивает большую гибкость с точки зрения расстояния и выравнивания. Вот пример:

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 1',
        ),
      ),
    ),
    SizedBox(width: 10), // Add spacing between fields
    Expanded(
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 2',
        ),
      ),
    ),
  ],
)

Метод 3: использование виджета «Перенос»
Виджет «Перенос» также можно использовать для выравнивания полей TextFormField в строке и автоматического переноса их на следующую строку, если недостаточно горизонтального пространства. Этот подход полезен при работе с динамическим количеством полей. Вот пример:

Wrap(
  spacing: 10, // Add spacing between fields
  children: [
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Field 1',
      ),
    ),
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Field 2',
      ),
    ),
  ],
)

Метод 4: Пользовательский макет с использованием виджета «Стек»
Для более сложных макетов можно использовать виджет «Стек» для создания пользовательского расположения TextFormFields в строке. Этот метод дает вам полный контроль над расположением каждого поля. Вот пример:

Stack(
  children: [
    Positioned(
      left: 0,
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 1',
        ),
      ),
    ),
    Positioned(
      left: 100,
      child: TextFormField(
        decoration: InputDecoration(
          labelText: 'Field 2',
        ),
      ),
    ),
  ],
)

В этой статье мы рассмотрели несколько методов выравнивания TextFormFields в ряд во Flutter. В зависимости от ваших конкретных требований вы можете выбрать наиболее подходящий подход. Независимо от того, выберете ли вы простоту виджета «Строка», гибкость виджета «Flex», автоматическую упаковку виджета «Обтекание» или индивидуальный макет с использованием виджета «Стек», у вас есть различные варианты создания привлекательного и функционального макета формы в вашем Flutter. приложения.