如何实现点击TextFormField时清空内容，未输入时恢复初始值'0'？

要实现初始值为'0'，点击清空、未输入恢复'0'的TextFormField，核心是通过文本控制器和焦点监听来处理状态变化，以下是具体实现步骤和代码：

核心实现思路 #

• 使用TextEditingController控制输入框的文本内容
• 使用FocusNode监听输入框的焦点状态，分别处理「获取焦点」和「失去焦点」的逻辑
• 监听焦点变化：获取焦点时清空初始的'0'；失去焦点时，若输入为空则恢复'0'

完整代码示例 #

class NumberInputWidget extends StatefulWidget {
  const NumberInputWidget({super.key});

  @override
  State<NumberInputWidget> createState() => _NumberInputWidgetState();
}

class _NumberInputWidgetState extends State<NumberInputWidget> {
  // 文本控制器，初始化值为'0'
  late TextEditingController _inputController;
  // 焦点节点，用于监听焦点状态
  late FocusNode _inputFocusNode;

  @override
  void initState() {
    super.initState();
    _inputController = TextEditingController(text: '0');
    _inputFocusNode = FocusNode();

    // 添加焦点状态监听
    _inputFocusNode.addListener(_handleFocusChange);
  }

  // 处理焦点变化逻辑
  void _handleFocusChange() {
    if (_inputFocusNode.hasFocus) {
      // 获取焦点时：如果当前文本是初始的'0'，则清空
      if (_inputController.text == '0') {
        _inputController.clear();
      }
    } else {
      // 失去焦点时：如果文本为空，恢复为'0'
      if (_inputController.text.trim().isEmpty) {
        _inputController.text = '0';
      }
    }
  }

  @override
  void dispose() {
    // 销毁控制器和焦点节点，避免内存泄漏
    _inputController.dispose();
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _inputController,
      focusNode: _inputFocusNode,
      // 限制输入为数字
      keyboardType: TextInputType.number,
      decoration: const InputDecoration(
        labelText: '请输入数字',
        border: OutlineInputBorder(),
      ),
    );
  }
}

关键代码说明 #

1. 控制器与焦点节点初始化：在initState中创建TextEditingController并设置初始值'0'，同时初始化FocusNode并添加状态监听。
2. 焦点变化处理：_handleFocusChange方法中，根据焦点状态执行不同逻辑：
   • 获取焦点：判断当前文本是否为'0'，是则清空输入框，方便用户直接输入
   • 失去焦点：判断输入内容是否为空（含空白字符），是空则恢复为'0'
3. 资源释放：在dispose方法中销毁控制器和焦点节点，避免Flutter应用内存泄漏。

可选优化：仅处理点击事件 #

如果只需要处理用户点击输入框的场景，也可以直接使用onTap回调替代焦点监听：

TextFormField(
  controller: _inputController,
  onTap: () {
    if (_inputController.text == '0') {
      _inputController.clear();
    }
  },
  // 其他配置...
)

但这种方式无法覆盖用户通过键盘切换焦点（如Tab键）的场景，所以更推荐使用焦点监听的方案。

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