Flutter Web在iOS模拟器Safari中点击Done按钮后键盘再次弹出问题

在iOS模拟器测试Flutter响应式Web应用时，数字类型的TextField点击键盘上的Done按钮后，键盘会立即再次弹出，效果如下：

相关代码：

SizedBox(
  width: context.isDesktop ? 300 : (context.width - 40),
  height: 50,
  child: TextField(
    controller: _textController,
    autocorrect: false,
    enableSuggestions: false,
    keyboardType: TextInputType.number,
    style: DesignFont.regular(20),
    decoration: const InputDecoration(
      hintText: Localized.enterPinCode,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(2)),
        borderSide: BorderSide(color: StyleColor.border),
      ),
    ),
  ),
)

这是Flutter Web在iOS环境下的特定兼容性问题，核心原因是点击Done后TextField意外重新获取焦点。可以通过主动管理焦点解决：

方法1：使用FocusNode控制焦点 #

1. 先定义一个FocusNode实例：

final FocusNode _pinFocusNode = FocusNode();

2. 修改TextField，绑定focusNode并在onSubmitted回调中主动失焦：

SizedBox(
  width: context.isDesktop ? 300 : (context.width - 40),
  height: 50,
  child: TextField(
    focusNode: _pinFocusNode,
    controller: _textController,
    autocorrect: false,
    enableSuggestions: false,
    keyboardType: TextInputType.number,
    textInputAction: TextInputAction.done, // 明确指定Done动作
    style: DesignFont.regular(20),
    onSubmitted: (_) => _pinFocusNode.unfocus(),
    decoration: const InputDecoration(
      hintText: Localized.enterPinCode,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(2)),
        borderSide: BorderSide(color: StyleColor.border),
      ),
    ),
  ),
)

方法2：直接通过全局焦点管理器失焦 #

如果不想单独维护FocusNode，也可以在onSubmitted中直接调用全局焦点管理器的失焦方法：

onSubmitted: (_) => FocusManager.instance.primaryFocus?.unfocus(),

两种方法都能在点击Done后强制移除TextField的焦点，阻止键盘再次弹出。

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