Flutter iOS端TextField执行pop返回后删除/退格键失效问题

根因分析 #

这是Flutter iOS端的常见兼容性问题，触发点如下：

• 你的TextFormField配置了autofocus: true，页面从OTP验证页pop返回时，输入框会自动触发焦点获取逻辑，但iOS系统软键盘与输入框的输入事件绑定出现同步异常，输入框看似持有焦点，实际未正确响应系统输入事件，导致退格键无响应。
• 跳转至OTP验证页时输入框未主动释放焦点，返回时焦点恢复逻辑异常也会触发该问题。

修复步骤 #

1. 新增焦点管控逻辑 #

在页面State中声明FocusNode，在生命周期中对应初始化和销毁：

class ForgotPasswordPageState extends State<ForgotPasswordPage> {
  late final TextEditingController _phoneNumberController;
  late final FocusNode _phoneFocusNode;

  @override
  void initState() {
    super.initState();
    _phoneNumberController = TextEditingController();
    _phoneFocusNode = FocusNode();
    // 首次进入页面时延后请求焦点，避免初始化同步异常
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _phoneFocusNode.requestFocus();
    });
  }

  @override
  void dispose() {
    _phoneFocusNode.dispose();
    _phoneNumberController.dispose();
    super.dispose();
  }

  // 原有其余逻辑不变
}

2. 修改TextFormField配置 #

移除硬编码的autofocus: true，绑定自定义焦点节点：

TextFormField(
  controller: _phoneNumberController,
  focusNode: _phoneFocusNode,
  validator: _validatePhoneNumber,
  autocorrect: false,
  autofocus: false, // 替换原有autofocus: true配置
  textInputAction: TextInputAction.done,
  keyboardType: TextInputType.phone,
  onChanged: _onChange,
)

3. 调整页面跳转逻辑 #

跳转前主动释放焦点，页面返回后手动触发焦点获取：

void _submitForm() async {
  _isSubmitted = true;
  _setIsLoading(true);
  if (_validateForm()) {
    try {
      // 跳转前先释放焦点，确保资源释放完成
      _phoneFocusNode.unfocus();
      await Future.delayed(const Duration(milliseconds: 100));
      // 等待OTP页面pop返回
      await Navigator.pushNamed(context, '/auth/verify_phone_step',
          arguments: {'phoneNumber': _phoneNumberController.text});
      // 返回后重新请求输入框焦点
      _phoneFocusNode.requestFocus();
    } catch (e) {
      // 原有异常处理逻辑
    }
  }
  _setIsLoading(false);
}

验证说明 #

修改完成后重新运行项目，跳转OTP页再返回，输入框会正常获取焦点，退格键即可正常响应。

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