如何在 Flutter TextField Widget 中添加“X”以清除搜索框？

Posted 2023-02-23

【中文标题】如何在 Flutter TextField Widget 中添加“X”以清除搜索框？

【英文标题】：How to I put an "X" to clear the search box in my Flutter TextField Widget?

【发布时间】：2020-09-26 04:22:51

【问题描述】：

以下代码提供了用于搜索的 TextField，但是，我希望在右侧清除“X”，以便用户可以清除搜索而无需退格。

TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(16.0),
                prefixIcon: Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                //Placeholder potential X for clearing search
                /*suffix: IconButton(
                    icon: Icon(Icons.clear), onPressed: () => TODO),*/
                hintText: 'Search by name',
                hintStyle: TextStyle(
                    fontWeight: FontWeight.w500, color: Colors.white)),
            onChanged: (string) 
              setState(() 
                filterAssets = assets
                    .where((test) => (test.name
                        .toLowerCase()
                        .contains(string.toLowerCase())))
                    .toList();
              );
            ,
          ),

【参考方案1】：

给它一个textController..

还有onPressed你可以清除它..

TextField(
            controller: textController,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(16.0),
                prefixIcon: Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                //Placeholder potential X for clearing search
                suffix: IconButton(
                    icon: Icon(Icons.clear), onPressed: () => textController.clear()),
                hintText: 'Search by name',
                hintStyle: TextStyle(
                    fontWeight: FontWeight.w500, color: Colors.white)),
            onChanged: (string) 
              setState(() 
                filterAssets = assets
                    .where((test) => (test.name
                        .toLowerCase()
                        .contains(string.toLowerCase())))
                    .toList();
              );
            ,
          ),

希望它能解决你的问题..