Flutter中如何为OtpTextField组件自动填充内容？

你当前的写法错误在于直接将字符串赋值给controller（它是List<TextEditingController?>类型），类型不匹配导致无法生效。正确的做法是遍历这个控制器列表，将目标字符串的对应字符逐个设置到每个控制器的text属性中。

修改后的代码示例 #

OtpTextField(
  numberOfFields: numberOfFields,
  fillColor: Colors.white,
  filled: true,
  borderColor: kLightGrayColortwo,
  focusedBorderColor: kLightGrayColortwo,
  clearText: clearText,
  showFieldAsBox: true,
  textStyle: textStyle16Bold,
  readOnly: false,
  onCodeChanged: (String value) {
    // 处理输入变化
  },
  handleControllers: (controllers) {
    // 获取要填充的目标字符串
    final scanText = _controller.scantext;
    // 遍历控制器列表，逐个设置对应字符
    for (int i = 0; i < controllers.length; i++) {
      // 避免字符串长度不足导致越界
      final char = i < scanText.length ? scanText[i] : '';
      controllers[i]?.text = char;
    }
  },
  onSubmit: (String vehicleNo) {
    _controller.vechilenostringg = vehicleNo;
  },
),

关键说明 #

• handleControllers的参数是控制器列表，不是单个控制器，必须遍历处理每个元素
• 必须判断索引是否在字符串长度范围内，防止因字符串长度和numberOfFields不匹配出现越界报错
• 如果需要清空未填满的输入框，可在字符不存在时赋值空字符串''

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