如何在 Flutter 中清除输入文本

Posted 2023-02-23

【中文标题】如何在 Flutter 中清除输入文本

【英文标题】：How to clear in put text in Flutter

【发布时间】：2021-06-10 18:15:39

【问题描述】：

我正在尝试在用户单击 X 图标时清除文本，当我单击它时我的搜索结果为空，但我的输入文本仍然存在，所以如果我能得到任何帮助或建议，我将不胜感激关于如何清除输入的文本。

                  Expanded(
                      flex: 8,
                      child: GestureDetector(
                        onTap: () ,
                        child: TextFormField(
                          autofocus: true,
                          enabled: true,
                          onChanged: (va) 
                            filterSearchResult(va, model);
                          ,
                          decoration: InputDecoration(
                              floatingLabelBehavior:
                                  FloatingLabelBehavior.never,
                              border: InputBorder.none,
                              hintStyle: TextStyle(
                                  color:
                                      Theme.of(context).secondaryHeaderColor)),
                        ),
                      )),
                  Expanded(
                    child: GestureDetector(
                        onTap: () 
                          setState(() 
                            items.clear();
                            itemList.clear();
                          );
                        ,
                        child: Image.asset(
                          "assets/icons/cancel.png",
                          color: Theme.of(context).secondaryHeaderColor,
                          height: 30,
                        )),
                  ),

【参考方案1】：

您应该使用TextEditingController 清除TextFormField 的值。

// Some code ...

final textEditingController = TextEditingController();

// Some code ...

Expanded(
  flex: 8,
  child: GestureDetector(
    onTap: () ,
    child: TextFormField(
      autofocus: true,
      enabled: true,
      controller: textEditingController, // Your TextEditingController here
      onChanged: (va) 
        filterSearchResult(va, model);
      ,
      decoration: InputDecoration(
        floatingLabelBehavior: FloatingLabelBehavior.never,
        border: InputBorder.none,
        hintStyle:
        TextStyle(color: Theme.of(context).secondaryHeaderColor),
      ),
    ),
  ),
),
Expanded(
  child: GestureDetector(
    onTap: () 
      setState(() 
        textEditingController.clear(); // Clear the TextFormField
        items.clear();
        itemList.clear();
      );
    ,
    child: Image.asset(
      "assets/icons/cancel.png",
      color: Theme.of(context).secondaryHeaderColor,
      height: 30,
    ),
  ),
),

【参考方案2】：

我使用 TextEditingController myController 并将 myController.text 设置为 null