Flutter TextField清除按钮不显示求助：输入文本时按钮未出现

你的问题在于TextEditingController的文本变化没有触发Widget的重建，导致suffixIcon的三元判断始终使用初始的空文本状态，所以清除按钮不会显示。

修复步骤： #

• 给_controller添加文本变化监听器，当文本改变时调用setState()触发UI重建
• 在组件销毁时移除监听器，避免内存泄漏

修改后的完整代码： #

class SearchField extends StatefulWidget {
  @override
  _SearchFieldState createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    // 添加文本变化监听器，触发UI更新
    _controller.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    // 清理监听器与控制器，避免内存泄漏
    _controller.removeListener(() {
      setState(() {});
    });
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      style: const TextStyle(
        color: Colors.white,
      ),
      decoration: InputDecoration(
        labelText: 'Search',
        labelStyle: TextStyle(
          color: Color.fromARGB(255, 255, 255, 255).withOpacity(0.4),
          fontFamily: 'Inter',
        ),
        border: InputBorder.none,
        suffixIcon: _controller.text.isEmpty
            ? null
            : IconButton(
                icon: Icon(Icons.clear),
                onPressed: () {
                  setState(() {
                    _controller.clear();
                  });
                },
              ),
      ),
      onEditingComplete: () {
        // TODO: search contact with _controller.text
        FocusScope.of(context).unfocus();
      },
    );
  }
}

补充说明： #

• 监听器会在每次文本输入/删除时触发setState()，让build方法重新执行，此时suffixIcon的判断会使用最新的_controller.text值
• 使用late关键字声明控制器，符合Dart空安全规范
• 必须在dispose中清理监听器和控制器，防止内存泄漏

内容的提问来源于stack exchange，提问作者ntardy