在TextField中动态出现的后缀图标

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);
});

但是sufixIcon从未出现。谁能说出正确的方法？

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