Flutter

#flutter #dart #textfield #onchange #textformfield

#flutter #dart #текстовое поле #onchange #textformfield

Вопрос:

Как мне запретить моему пользователю использовать пространство в текстовом поле, автоматически удалив это пространство, когда пользователь закончит печатать?

Например, если пользователь вводит King of Light , он будет применяться KingofLight после того, как он / она отойдет от текстового поля.

 TextFormField(
                          initialValue: nickname != null
                              ? nickname
                              : current_user.nickname,
                          decoration: InputDecoration(
                            border: new OutlineInputBorder(
                              borderSide: new BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 1.0),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.grey, width: 1.0),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            hintText: 'Empty',
                            hintStyle: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 20,
                              //fontWeight: FontWeight.bold,
                            ),
                          ),
                          style: TextStyle(
                            fontSize: 20,
                            // fontWeight: FontWeight.bold,
                          ),
                          validator: (val) => val.length < 2
                              ? 'Enter a nickname 2 char long'
                              : null,
                          onChanged: (val) {
                            val = val.replaceAll(' ', '');
                            setState(() => nickname = val);
                          },
                        ),
  

пожалуйста, помогите мне! Спасибо!

Комментарии:

1. см . TextInputFormatter

Ответ №1:

Текстовое поле, которое не допускает пробелов, с использованием регулярного выражения. Как показано ниже-

             TextFormField(
               inputFormatters: [
                if (denySpaces)
                  FilteringTextInputFormatter.deny(
                      RegExp(r's')),
              ])
  

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

Комментарии:

1. Кажется надежным решением для комбинации FocusNode и TextEditingController

2. Что такое переменная denySpaces?

Ответ №2:

Один из способов сделать это — использовать TextEditingController и может вызывать formatNickname() в соответствии с вашим вариантом использования.

 class _MyWidgetState extends State<MyWidget>{
  
  FocusNode node = new FocusNode();
  TextEditingController tc = TextEditingController();
  
  @override
  void initState(){
    node.addListener((){
      if(!node.hasFocus){
        formatNickname();
      }
    });
    super.initState();
  }
  
  void formatNickname(){
    tc.text = tc.text.replaceAll(" ", "");
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          focusNode: node,
          controller: tc,
        ),
        TextFormField(),
        RaisedButton(
          child: Text('Format'),
          onPressed: (){
            formatNickname();
          },
        ),
      ],
    );
  }
}
  

Ответ №3:

Еще один вариант отключения возможности записи пробелов в a TextField , вы можете использовать средство форматирования ввода для ограничения допустимых символов.

 import 'package:flutter/services.dart';

class NoSpaceFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // Check if the new value contains any spaces
    if (newValue.text.contains(' ')) {
      // If it does, return the old value
      return oldValue;
    }
    // Otherwise, return the new value
    return newValue;
  }
}
  

Мы создали новый класс с именем NoSpaceFormatter that extends TextInputFormatter . formatEditUpdate() Метод вызывается всякий раз, когда пользователь вводит или удаляет символ в TextField .

Внутри formatEditUpdate() метода мы проверяем, содержит ли новое значение какие-либо пробелы, вызывая contains() метод для свойства text newValue параметра. Если он содержит пробелы, мы возвращаем oldValue , что не позволяет пользователю вводить символ пробела. В противном случае мы возвращаем newValue , что позволяет пользователю вводить символ.

Чтобы использовать NoSpaceFormatter класс в a TextField , вы можете присвоить inputFormatters свойству список, содержащий экземпляр средства форматирования:

 TextField(
  inputFormatters: [NoSpaceFormatter()],
  // Other properties...
)