Отображать значок в текстовом поле, если он не пуст - PullRequest
Новая
       1

Отображать значок в текстовом поле, если он не пуст

0 голосов
/ 17 июня 2020

Я пытаюсь сделать простую вещь ... Отображение кнопки очистки, когда TextField не пуст, чтобы очистить содержимое и скрыть его, когда содержимое пусто. Вот код 

   final TextEditingController _controller = TextEditingController();
       ...

                   TextFormField(
                      controller: _controller,
                      decoration: InputDecoration(
                          suffixIcon: _controller.text.length > 0
                              ? IconButton(
                                  icon: Icon(Icons.clear, size: 16),
                                  onPressed: () {
                                    _controller.clear();
                                  },
                                )
                              : null))

Это работает, но не с активированной клавиатурой. Вы должны закрыть клавиатуру, чтобы она заработала .. Как это сделать в живую при наборе текста с помощью контроллера?

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

Это потому, что ваш пользовательский интерфейс не перестраивается, пока вы не закроете клавиатуру, которая вызовет перестройку, для этого вы можете использовать этот небольшой трюк, например: 

  final TextEditingController controller = TextEditingController();

  changesOnField() {
    setState(() {}); // Will re-Trigger Build Method
  }

  @override
  void initState() {
    super.initState();
    controller.addListener(changesOnField);
  }```
1 голос
/ 17 июня 2020

Вам нужно обновлять состояние каждый раз при изменении ввода: 

TextEditingController _controller = TextEditingController();

@override
void initState() {
  super.initState();

  _controller.addListener(() {
    setState(() {});
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: _controller,
        decoration: InputDecoration(
          suffixIcon: _controller.text.isNotEmpty
              ? IconButton(
                  icon: Icon(Icons.clear, size: 16),
                  onPressed: () {
                    _controller.clear();
                  },
                )
              : null,
        ),
      ),
    ),
  );
}
...