Flutter PIN码文本框粘贴功能失效 仅首个输入框可成功粘贴内容

问题根因 #

• 市面上绝大多数自定义PIN码输入框都会将每一位验证码对应为独立的TextField组件，各自持有独立的输入控制器
• 系统原生粘贴事件默认仅作用于当前处于聚焦状态的单个TextField，只会把完整的粘贴内容赋值给当前聚焦的输入框
• 未额外适配多字符粘贴拆分逻辑的前提下，其余输入位无法自动拿到对应位置的字符，就会出现仅第一个输入框有内容的问题

修复方案 #

你可以通过对输入控制器加监听、自动拆分多字符内容的方式快速适配粘贴功能，核心实现代码如下：

// 1. 定义PIN码长度、对应输入控制器列表、焦点节点列表
final int pinLength = 4;
late List<TextEditingController> pinControllers;
late List<FocusNode> focusNodes;

@override
void initState() {
  super.initState();
  pinControllers = List.generate(pinLength, (_) => TextEditingController());
  focusNodes = List.generate(pinLength, (_) => FocusNode());
  // 给每个输入控制器加监听，处理粘贴逻辑
  for (int i = 0; i < pinLength; i++) {
    pinControllers[i].addListener(() {
      final value = pinControllers[i].text;
      // 当输入内容长度大于1，说明是粘贴的多字符验证码
      if (value.length > 1) {
        // 清除当前输入框内容，避免重复
        pinControllers[i].clear();
        // 逐个填充对应位置的字符
        for (int j = 0; j < pinLength && j < value.length; j++) {
          pinControllers[j].text = value[j];
          // 自动跳转焦点到最后一个填充的输入位
          if (j == value.length - 1) {
            FocusScope.of(context).requestFocus(focusNodes[j]);
          }
        }
      }
      // 单字符输入时的自动跳位逻辑（原有逻辑可保留）
      else if (value.length == 1 && i < pinLength - 1) {
        FocusScope.of(context).requestFocus(focusNodes[i + 1]);
      }
    });
  }
}

// 2. 组件释放时销毁控制器和焦点节点
@override
void dispose() {
  for (var controller in pinControllers) {
    controller.dispose();
  }
  for (var node in focusNodes) {
    node.dispose();
  }
  super.dispose();
}

// 3. 构建PIN码输入位时，对应绑定控制器和焦点节点即可

如果你不想自己手动实现，也可以直接使用pub.dev上成熟的PIN码输入组件，比如pinput，该组件默认已经适配了多字符粘贴填充的能力，开箱即用。

注意事项 #

• 适配时建议增加非数字、特殊字符的过滤逻辑，避免粘贴的无关内容填充到输入位
• 可以配合长按菜单自定义，给输入框增加专门的粘贴按钮，提升用户体验

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