Кнопка очистки текстового поля Flutter появляется, когда текст не пуст - PullRequest
Новая
       18

Кнопка очистки текстового поля Flutter появляется, когда текст не пуст

0 голосов
/ 03 августа 2020

Я это уже читал. как сделать так, чтобы кнопка очистки появлялась, когда текст вводится в TextFormField во флаттере , но это не работает, а также я обнаружил, что текстовое поле не распознает изменение при вводе текста. Если вы знаете решение, я очень признателен, если вы дадите мне знать.

Вот мой код ниже: 

  TextField(
                            controller: _controller,
                            onChanged: (String word) {
                              this.word = word;
                              _controller.text = word;
                            },
                            style: TextStyle(
                                fontSize: 30,
                                fontWeight: FontWeight.w800,
                                color: Colors.black),
                            decoration: InputDecoration(
                              isDense: true,
                              suffix: _controller.text.length > 0
                                  ? Padding(
                                      padding: const EdgeInsetsDirectional.only(
                                          bottom: 2),
                                      child: IconButton(
                                        onPressed: () => _controller.clear(),
                                        icon: Icon(Icons.clear),
                                        iconSize: 25,
                                        color: Colors.black.withOpacity(0.5),
                                      ))
                                  : null,
                              contentPadding:
                                  EdgeInsets.only(left: 8.5, bottom: 3),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.black)),
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.black),
                              ),
                              hintText: "Add text",
                              hintStyle: TextStyle(
                                  fontSize: 29.0,
                                  color: Colors.black.withOpacity(0.5)),
                            )),

Что я хочу сделать:

enter image description here введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 31 августа 2020

Прежде всего, в onChanged () вы просто присваиваете значение controller.text, не сообщая виджету о необходимости перестроения в соответствии с изменениями. Следовательно, у вас должен быть setState () внутри onChanged ().

Во-вторых, не переназначайте controller.text, так как это приведет к тому, что ошибка курсора всегда будет переходить в начало (не спрашивайте меня почему, я просто знаю, что ошибка там). Поэтому вместо этого создайте новую переменную типа String и присвойте ей значение в onChanged (). Затем при проверке условия для отображения или скрытия значка суффикса проверяйте условие с помощью этой новой строки, а не с помощью controller.text.

0 голосов
/ 03 августа 2020

Попробуйте использовать. 

suffix = _controller.text !=null?Padding(
                                  padding: const EdgeInsetsDirectional.only(
                                      bottom: 2),
                                  child: IconButton(
                                    onPressed: () => _controller.clear(),
                                    icon: Icon(Icons.clear),
                                    iconSize: 25,
                                    color: Colors.black.withOpacity(0.5),
                                  ))
                              : null,
...