在 TextField 中动态出现 suffixIcon

Question

我的目标是使用 TextField 构建一个搜索框，该框在字段末尾有一个图标按钮以清除文本字段中的内容。目前我正在使用，

TextField(
   controller: _searchFieldController,
   decoration: InputDecoration(
     filled: true,
     fillColor: Colors.white,
     prefixIcon: Icon(Icons.search),
     border: OutlineInputBorder(
     borderRadius: BorderRadius.circular(10.0)),
     hintText: 'Search here...',
     hintStyle: Theme.of(context).textTheme.caption,
     suffixIcon: _searchFieldController.text.length > 0 ? IconButton(
       onPressed: () {
          _searchFieldController.clear();
       },
       icon: Icon(Icons.cancel, color: Colors.grey)
     ) : null,
  ),
),

带有以下文本编辑控制器。

final _searchFieldController = TextEditingController();

_searchFieldController.addListener(() {
    print(_searchFieldController.text.length);
});

但 suffixIcon 永远不会出现。谁能告诉我如何做到这一点？

Answer 1

尝试为长度设置一个状态变量，并在添加侦听器函数中设置长度并检查图标可见性的长度

final _searchFieldController = TextEditingController();
final _length = 0;

_searchFieldController.addListener(() {
    setState(() => _length = _searchFieldController.text.length);
});

然后检查_length变量

suffixIcon: _length > 0 ? IconButton(
   onPressed: () {
      _searchFieldController.clear();
   },
   icon: Icon(Icons.cancel, color: Colors.grey)
 ) : null