Flutter iOS端键盘事件监听失效问题求助

在iOS设备上，KeyboardListener和RawKeyboardListener无法捕获文本输入框的按键事件（比如退格键），这是因为iOS原生的文本输入机制与Android不同，这类全局键盘监听器无法拦截文本框内部的输入事件。以下是几种可行的替代方案：

方案一：通过TextEditingController监听文本变化间接判断退格 #

利用文本框内容的前后变化推断退格操作，适配大部分场景：

import 'package:flutter/material.dart';

class TestComponent extends StatefulWidget {
  const TestComponent({Key? key}) : super(key: key);

  @override
  State<TestComponent> createState() => _TestComponentState();
}

class _TestComponentState extends State<TestComponent> {
  final TextEditingController _controller = TextEditingController();
  String _previousText = '';

  @override
  void initState() {
    super.initState();
    _controller.addListener(_onTextChanged);
  }

  void _onTextChanged() {
    String currentText = _controller.text;
    // 判断退格：当前文本长度更短，且长度差为1（排除剪切等操作）
    if (currentText.length < _previousText.length && (_previousText.length - currentText.length == 1)) {
      print('退格键被按下');
      // 插入你的退格逻辑
    }
    _previousText = currentText;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        controller: _controller,
      ),
    );
  }
}

方案二：自定义TextInputFormatter拦截输入变化 #

通过自定义格式化器精准捕获输入过程，降低误判概率：

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class BackspaceDetectFormatter extends TextInputFormatter {
  final Function() onBackspacePressed;

  BackspaceDetectFormatter({required this.onBackspacePressed});

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 新文本更短且无选中内容时，判定为退格
    if (newValue.text.length < oldValue.text.length && oldValue.selection.baseOffset == oldValue.selection.extentOffset) {
      onBackspacePressed();
    }
    return newValue;
  }
}

class TestComponent extends StatelessWidget {
  const TestComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        inputFormatters: [
          BackspaceDetectFormatter(
            onBackspacePressed: () {
              print('退格键被按下');
              // 执行你的退格逻辑
            },
          ),
        ],
      ),
    );
  }
}

注意事项 #

• 方案一需额外处理剪切、粘贴等操作导致的文本长度变化，避免误判退格。
• 方案二基于文本输入的格式化流程触发，更贴近真实输入事件时机。

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