Flutter中TextFormField事件监听与值修改实现方案咨询

Hey，刚好我之前也处理过类似的需求，用TextEditingController就能完美覆盖你的场景！它就像TextFormField的专属管家，既能监听输入变化、焦点状态，还能主动修改输入值，我一步步给你讲清楚怎么用：

1. 先完成Controller和FocusNode的基础配置 #

首先你需要在State类里声明并初始化TextEditingController和FocusNode（后者用来监听焦点变化），记得在组件销毁时释放资源，避免内存泄漏：

class MyFormState extends State<MyForm> {
  late TextEditingController _textController;
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    // 初始化时可以设置默认文本
    _textController = TextEditingController(text: "请输入内容");
    _focusNode = FocusNode();
    // 在这里添加所有监听逻辑
    _setupAllListeners();
  }

  @override
  void dispose() {
    // 必须销毁，防止内存泄漏
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      // 绑定controller
      controller: _textController,
      // 绑定focusNode
      focusNode: _focusNode,
      decoration: const InputDecoration(labelText: "自定义输入框"),
    );
  }
}

2. 监听文本输入（处理空格等特定字符） #

给_textController添加addListener回调，每次文本变化都会触发它。比如你想自动移除用户输入的空格，代码可以这么写：

void _setupAllListeners() {
  // 监听文本变化
  _textController.addListener(() {
    final currentText = _textController.text;
    // 检查是否包含空格
    if (currentText.contains(" ")) {
      // 🌟 重要提示：修改文本时先移除监听，避免循环触发
      _textController.removeListener(_setupAllListeners);
      // 替换所有空格为空
      _textController.text = currentText.replaceAll(" ", "");
      // 把光标移到文本末尾，提升用户体验
      _textController.selection = TextSelection.fromPosition(
        TextPosition(offset: _textController.text.length),
      );
      // 处理完再加回监听
      _textController.addListener(_setupAllListeners);
    }
  });
}

这里为什么要临时移除监听？因为修改_textController.text会再次触发addListener回调，如果不移除就会陷入无限循环，一定要注意这个细节！

3. 监听焦点变化（获取/失去焦点时修改值） #

用_focusNode的addListener就能监听焦点状态，比如当输入框获取焦点时清空默认提示，失去焦点时如果为空就恢复提示：

void _setupAllListeners() {
  // 上面的文本监听逻辑...

  // 监听焦点变化
  _focusNode.addListener(() {
    if (_focusNode.hasFocus) {
      // 获取焦点时，如果是默认文本就清空
      if (_textController.text == "请输入内容") {
        _textController.clear();
      }
    } else {
      // 失去焦点时，如果文本为空就恢复默认提示
      if (_textController.text.isEmpty) {
        _textController.text = "请输入内容";
      }
    }
  });
}

4. 完整可运行示例 #

把上面的逻辑整合起来，给你一个直接能跑的小demo：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("TextFormField Controller Demo")),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  late TextEditingController _textController;
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(text: "请输入内容");
    _focusNode = FocusNode();
    _setupAllListeners();
  }

  void _setupAllListeners() {
    // 监听文本变化，自动移除空格
    _textController.addListener(() {
      final currentText = _textController.text;
      if (currentText.contains(" ")) {
        _textController.removeListener(_setupAllListeners);
        _textController.text = currentText.replaceAll(" ", "");
        _textController.selection = TextSelection.fromPosition(
          TextPosition(offset: _textController.text.length),
        );
        _textController.addListener(_setupAllListeners);
      }
    });

    // 监听焦点变化
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        if (_textController.text == "请输入内容") {
          _textController.clear();
        }
      } else {
        if (_textController.text.isEmpty) {
          _textController.text = "请输入内容";
        }
      }
    });
  }

  @override
  void dispose() {
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _textController,
      focusNode: _focusNode,
      decoration: const InputDecoration(
        labelText: "输入框",
        border: OutlineInputBorder(),
        hintText: "输入内容会自动移除空格",
      ),
    );
  }
}

这个示例里，用户输入空格会被自动移除，点击输入框获取焦点时会清空默认提示，离开时如果为空又会恢复提示，完全符合你的需求～

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