在TextField中动态出现的suffixIcon

我的目的是使用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永远不会出现。谁能说出正确的方法?

评论
  • Giles
    Giles 回复

    尝试使用状态变量来设置长度,并在内部添加侦听器函数中设置长度,并检查图标可见性的长度

    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