文本不为空时出现Flutter textfield clear按钮

Posted 2023-02-23

【中文标题】文本不为空时出现Flutter textfield clear按钮

【英文标题】：Flutter textfield clear button appears when text is not empty

【发布时间】：2020-11-23 04:14:30

【问题描述】：

我已经读过了。 how to make clear button appears when text is enter in TextFormField in flutter 但它不起作用，而且我发现输入文本时文本字段无法识别更改。如果您知道解决方案，如果您告诉我，我将不胜感激。

下面是我的代码：

  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)),
                            )),

我想做什么：

【参考方案1】：

首先，在 onChanged() 中，您只是将值分配给 controller.text，而不告诉小部件根据更改进行重建。因此，您必须在 onChanged() 中有一个 setState()。

第二，不要重新分配controller.text，因为那样会导致光标总是跳到开头的错误（不要问我为什么，我只知道错误在那里）。因此，改为创建一个新的变量类型 String 并在 onChanged() 中为其赋值。然后在检查条件以显示或隐藏后缀图标时，使用该新字符串检查条件，而不是使用 controller.text。

【参考方案2】：

尝试使用。

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,

【讨论】：

这个我试过了，还是不行……我觉得是textfield相关的一种bug。

尝试使用一行。您可以在其中水平对齐它们