Flutter开发：如何在TextField输入完成时显示勾选图标

嘿，我来帮你搞定这个需求！要让TextField在输入完成后显示勾选图标，我们可以利用TextField的suffixIcon属性，再结合对输入内容的状态判断来控制图标的显示。下面给你两种实用的实现方式：

方式一：用ValueListenableBuilder快速实现（推荐） #

这种方式不需要将组件改成Stateful，直接通过监听TextEditingController的变化来动态显示图标，代码简洁易维护：

Widget textfields(String hint, TextEditingController cont) {
  return Padding(
    padding: const EdgeInsets.all(12),
    child: ValueListenableBuilder<TextEditingValue>(
      // 监听控制器的文本变化
      valueListenable: cont,
      builder: (context, value, child) {
        return TextField(
          controller: cont,
          autofocus: false,
          style: TextStyle(fontSize: 15.0, color: Colors.orange),
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.blueGrey[50],
            hintText: hint,
            contentPadding: const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 10.0),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(25.7),
            ),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
              borderRadius: BorderRadius.circular(25.7),
            ),
            // 当文本不为空时显示绿色勾选图标，为空则隐藏
            suffixIcon: value.text.isNotEmpty
                ? Icon(Icons.check, color: Colors.green, size: 20)
                : null,
          ),
        );
      },
    ),
  );
}

方式二：StatefulWidget实现（更灵活） #

如果后续你需要添加更多逻辑（比如判断输入格式是否合法后再显示图标），可以把组件改成Stateful的，通过监听控制器来管理图标状态：

class CustomTextField extends StatefulWidget {
  final String hint;
  final TextEditingController controller;

  const CustomTextField({
    Key? key,
    required this.hint,
    required this.controller,
  }) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  bool _showCheckIcon = false;

  @override
  void initState() {
    super.initState();
    // 初始化时判断文本是否为空
    _showCheckIcon = widget.controller.text.isNotEmpty;
    // 添加文本变化监听
    widget.controller.addListener(_updateIconState);
  }

  void _updateIconState() {
    setState(() {
      // 这里可以扩展逻辑，比如判断输入长度、格式等
      _showCheckIcon = widget.controller.text.isNotEmpty;
    });
  }

  @override
  void dispose() {
    // 移除监听避免内存泄漏
    widget.controller.removeListener(_updateIconState);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: TextField(
        controller: widget.controller,
        autofocus: false,
        style: const TextStyle(fontSize: 15.0, color: Colors.orange),
        decoration: InputDecoration(
          filled: true,
          fillColor: Colors.blueGrey[50],
          hintText: widget.hint,
          contentPadding: const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 10.0),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: const BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),
          suffixIcon: _showCheckIcon
              ? const Icon(Icons.check, color: Colors.green, size: 20)
              : null,
        ),
      ),
    );
  }
}

额外扩展：仅在输入完成时显示图标 #

如果你想要的“输入完成”是指用户点击键盘上的完成按钮（而非输入过程中），可以在TextField里添加onEditingComplete回调来控制：

// 在TextField属性中添加
onEditingComplete: () {
  setState(() {
    _showCheckIcon = widget.controller.text.isNotEmpty;
  });
},

这样只有当用户主动结束输入时，才会显示勾选图标，更贴合“完成输入”的场景。

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