Flutter TextField PIN输入优化需求：自动转换大写与输入5位后自动添加分隔横杠

我来帮你搞定这两个需求——自动转大写和输入≥5字符时添加分隔横杠，基于你提供的代码做了针对性修改，直接能用：

// 记得在你的State类中添加以下成员变量和方法
late final TextEditingController _pinController;

@override
void initState() {
  super.initState();
  _pinController = TextEditingController();
}

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

String _formatPinText(String input) {
  // 清理输入：过滤非字母数字字符，同时转大写
  final cleanedInput = input.replaceAll(RegExp(r'[^A-Z0-9]'), '').toUpperCase();
  
  // 处理分隔横杠逻辑
  if (cleanedInput.length > 5) {
    // 超过5个字符时，在第5位后插入横杠
    return '${cleanedInput.substring(0,5)}-${cleanedInput.substring(5)}';
  } else if (cleanedInput.length == 5) {
    // 刚好输入5个字符时，自动追加横杠
    return '$cleanedInput-';
  } else {
    return cleanedInput;
  }
}

// 你的原有组件修改后的版本
Visibility(
  visible: _pinAttemptsRemaining > 0 && pin != duplicatedValue,
  child: ConstrainedBox(
    constraints: const BoxConstraints.tightFor(width: 450),
    child: TextField(
      maxLength: 9, // 8位PIN+1个横杠，总长度调整为9
      keyboardType: TextInputType.text,
      controller: _pinController,
      onChanged: (text) {
        final formattedText = _formatPinText(text);
        // 只有当格式化后的文本和输入不同时才更新，避免无限循环
        if (formattedText != text) {
          _pinController.value = TextEditingValue(
            text: formattedText,
            selection: TextSelection.collapsed(offset: formattedText.length),
          );
        }
        // 存储去掉横杠的纯PIN值，供后续业务逻辑使用
        pin = formattedText.replaceAll('-', '');
      },
      textAlign: TextAlign.left,
      decoration: InputDecoration(
        errorText: _errorText,
        icon: const Icon(Icons.dialpad),
        labelText: '8-digit PIN',
        contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
        focusedBorder: const UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent, width: 2),
        ),
        focusedErrorBorder: const UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.red, width: 2),
        ),
        errorBorder: const UnderlineInputBorder(
          borderSide: BorderSide(Color(0xFF696969), width: 1), // 修正原代码中错误的Color值
        ),
      ),
    ),
  ),
)

关键改动说明： #

• TextEditingController的使用：用来精准控制文本内容和光标位置，避免格式化后光标乱跑的问题，一定要记得在initState初始化、dispose中释放资源，防止内存泄漏。
• 自动转大写+输入清理：在_formatPinText方法里，先把输入的所有字符转成大写，同时过滤掉非字母数字的字符（比如用户手动输入的横杠），保证输入的规范性。
• 智能分隔横杠：当输入的有效PIN字符数达到5个时自动追加横杠，超过5个时在第5位后插入横杠，既满足需求又不影响用户输入流畅度。
• PIN值存储优化：把格式化后的文本去掉横杠再存入pin变量，这样后续业务逻辑使用的是纯8位PIN，不需要额外处理分隔符。
• 细节修正：调整了maxLength为9（适配8位PIN+1个横杠），同时修正了原代码中错误的灰色Color值（原0xFFF696969是无效值，改为0xFF696969）。

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