Flutter中如何处理TextField软键盘的返回（关闭）按钮事件并在关闭时修改TextField

嘿，这个场景我之前做项目时刚好碰到过，给你分享几个实用的实现方式：

方案1：利用FocusNode监听焦点丢失（最常用） #

当你点击软键盘的关闭按钮收起键盘时，TextField会失去焦点，我们可以通过FocusNode监听这个事件，进而执行自定义的修改操作。

步骤如下：

1. 初始化FocusNode和TextEditingController，记得在页面销毁时 dispose 它们避免内存泄漏。
2. 在initState中给FocusNode添加焦点变化监听器。
3. 将FocusNode绑定到目标TextField上。

代码示例：

class _YourPageState extends State<YourPage> {
  late FocusNode _textFieldFocusNode;
  late TextEditingController _textEditingController;

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _textFieldFocusNode = FocusNode();
    
    // 监听焦点变化
    _textFieldFocusNode.addListener(() {
      if (!_textFieldFocusNode.hasFocus) {
        // 软键盘关闭（TextField失去焦点），执行你的修改操作
        _handleTextFieldAfterKeyboardClose();
      }
    });
  }

  void _handleTextFieldAfterKeyboardClose() {
    // 示例：给文本添加后缀或格式化内容
    String currentText = _textEditingController.text;
    setState(() {
      _textEditingController.text = "$currentText [已确认]";
    });
  }

  @override
  void dispose() {
    _textFieldFocusNode.dispose();
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextField(
        controller: _textEditingController,
        focusNode: _textFieldFocusNode,
        decoration: const InputDecoration(hintText: "输入内容试试"),
      ),
    );
  }
}

方案2：监听软键盘显示/隐藏状态（更精准） #

如果需要严格区分“软键盘收起”和“其他原因导致的焦点丢失”，可以通过WidgetsBindingObserver监听窗口视图Insets的变化，精准判断软键盘的状态。

步骤：

1. 让页面的State类混入WidgetsBindingObserver。
2. 在initState中注册观察者，dispose中注销。
3. 重写didChangeMetrics方法，结合TextField的焦点状态判断是否是当前TextField对应的软键盘收起。

代码示例：

class _YourPageState extends State<YourPage> with WidgetsBindingObserver {
  late TextEditingController _textEditingController;
  late FocusNode _textFieldFocusNode;
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _textFieldFocusNode = FocusNode();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final viewInsets = WidgetsBinding.instance.window.viewInsets;
    bool currentKeyboardVisible = viewInsets.bottom > 0;
    
    // 仅当之前键盘显示、现在收起，且TextField之前有焦点时触发
    if (_isKeyboardVisible && !currentKeyboardVisible && _textFieldFocusNode.hasFocus) {
      _handleTextFieldAfterKeyboardClose();
      // 手动让TextField失去焦点，避免重复触发
      _textFieldFocusNode.unfocus();
    }
    _isKeyboardVisible = currentKeyboardVisible;
  }

  void _handleTextFieldAfterKeyboardClose() {
    // 示例：格式化文本为大写
    String formattedText = _textEditingController.text.trim().toUpperCase();
    setState(() {
      _textEditingController.text = formattedText;
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _textFieldFocusNode.dispose();
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TextField(
        controller: _textEditingController,
        focusNode: _textFieldFocusNode,
        decoration: const InputDecoration(hintText: "输入内容试试"),
      ),
    );
  }
}

方案3：监听软键盘完成按钮（针对特定场景） #

如果你的软键盘显示的是“完成”按钮（可通过textInputAction设置），点击该按钮会触发onSubmitted回调并收起键盘，这种情况可以直接在回调中处理逻辑。

代码示例：

TextField(
  controller: _textEditingController,
  textInputAction: TextInputAction.done, // 设置软键盘按钮为「完成」
  onSubmitted: (value) {
    // 点击完成按钮后执行修改操作
    String modifiedText = "$value - 已提交";
    setState(() {
      _textEditingController.text = modifiedText;
    });
    // 手动收起键盘（部分场景系统会自动处理，保险起见可添加）
    FocusScope.of(context).unfocus();
  },
  decoration: const InputDecoration(hintText: "输入内容试试"),
)

注意事项： #

• 方案1是通用方案，适合大多数场景，不管是点击软键盘关闭按钮还是页面其他区域收起键盘，只要TextField失焦就会触发。
• 方案2更精准，适合需要区分“软键盘收起”和“其他失焦场景”的需求。
• 方案3仅针对点击软键盘「完成」按钮的情况，若要监听Android软键盘的向下关闭箭头，建议用方案1或2。

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