В Flutter виджет «Текстовое поле» является основным компонентом пользовательского ввода. Однако управление максимальной длиной текста в текстовом поле может быть общим требованием во многих приложениях. В этой статье мы рассмотрим различные методы управления длиной текста в текстовых полях Flutter, а также приведем практические примеры кода. Итак, приступим!

Метод 1: свойство maxLength
Самый простой способ ограничить длину текста в текстовом поле — использовать свойство maxLength. Установив для этого свойства определенное значение, вы можете ограничить количество символов, которые может ввести пользователь. Вот пример:

TextField(
  maxLength: 50,
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
)

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

TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  onChanged: (text) {
    if (text.length > 50) {
      String truncatedText = text.substring(0, 50);
      _controller.text = truncatedText;
      _controller.selection = TextSelection.fromPosition(
        TextPosition(offset: truncatedText.length),
      );
    }
  },
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
)

Метод 3: InputFormatter
Flutter предоставляет класс TextInputFormatter, который позволяет определять собственные правила форматирования для ввода текста. Вы можете использовать его для ограничения длины текста, создав собственный форматтер. Вот пример:

class MaxLengthFormatter extends TextInputFormatter {
  final int maxLength;
  MaxLengthFormatter(this.maxLength);
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    if (newValue.text.length > maxLength) {
      return oldValue;
    }
    return newValue;
  }
}
TextField(
  inputFormatters: [MaxLengthFormatter(50)],
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
)

Метод 4: регулярные выражения
Используя регулярные выражения, вы можете проверять и ограничивать ввод на основе определенных шаблонов, включая длину текста. Этот метод обеспечивает большую гибкость при определении сложных правил. Вот пример:

TextField(
  onChanged: (text) {
    RegExp regex = RegExp(r'^.{0,50}$');
    if (!regex.hasMatch(text)) {
      // Input exceeds maximum length
      // Display an error message or take appropriate action
    }
  },
  decoration: InputDecoration(
    labelText: 'Enter your text',
  ),
)

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