Flutter PIN设置页面文本颜色调整及校验提示逻辑优化

针对你的三个需求，以下是具体的代码修改方案：

1. 调整PinValidationProvider逻辑 #

• 添加_isConfirmPinEntered变量，跟踪确认PIN是否输入完整（4位）
• 修改validatePin方法，仅在输入完4位PIN后才标记确认输入状态，且延迟清空不匹配的PIN输入框，避免输入过程中触发提示

修改后的完整PinValidationProvider代码：

class PinValidationProvider extends ChangeNotifier {
  bool _isInvalidPin = false;
  bool _isConfirmPinEntered = false; // 新增：标记确认PIN是否输入完整

  bool get isInvalidPin => _isInvalidPin;
  bool get isPinMatched => confirmedPin == pin;
  bool get isConfirmPinEntered => _isConfirmPinEntered; // 暴露状态给UI
  bool isPinSet = false;
  String pin = '';
  String confirmedPin = '';

  void validatePin(String pin, TextEditingController controller) {
    if (pin.length != 4) {
      _isInvalidPin = false;
      _isConfirmPinEntered = false; // 输入未完成时重置标记
    } else {
      _isConfirmPinEntered = true; // 输入完4位标记为已完成
      if (_isSimpleSequence(pin) || _isRepeatedDigit(pin)) {
        _isInvalidPin = true;
      } else {
        _isInvalidPin = false;
        if (!isPinSet) {
          isPinSet = true;
          this.pin = pin;
          confirmedPin = ''; // 设置初始PIN后清空确认PIN
          _isConfirmPinEntered = false; // 重置确认输入标记
        } else {
          confirmedPin = pin;
          // 仅当确认PIN不匹配时，延迟清空输入框
          if (!isPinMatched) {
            Future.delayed(const Duration(milliseconds: 500), () {
              controller.clear();
              _isConfirmPinEntered = false; // 清空后重置标记
              notifyListeners();
            });
          }
        }
      }
    }
    Future.microtask(() {
      notifyListeners();
    });
  }

  bool _isSimpleSequence(String pin) {
    for (int i = 0; i < pin.length - 1; i++) {
      int digit1 = int.parse(pin[i]);
      int digit2 = int.parse(pin[i + 1]);

      if (digit2 - digit1 == 1) {
        return true;
      }
    }
    return false;
  }

  bool _isRepeatedDigit(String pin) {
    for (int i = 0; i < pin.length - 1; i++) {
      if (pin[i] == pin[i + 1]) {
        return true;
      }
    }
    return false;
  }
}

2. 调整UI提示逻辑 #

• 修改不匹配提示的显示条件：仅当已设置初始PIN、输入完4位确认PIN且PIN不匹配时，才显示"Entered PIN does not match"
• 调整规则文本颜色：输入正确PIN时固定为黑色，无效PIN时显示红色，其他情况保持黑色

修改后的_SetPinTestscreenState中Consumer部分代码：

Consumer<PinValidationProvider>(
  builder: (context, provider, child) {
    // 规则文本颜色：PIN匹配时为黑色，无效时为红色，其余情况黑色
    final ruleTextColor = provider.isPinMatched 
        ? Colors.black 
        : provider.isInvalidPin 
            ? Colors.red 
            : Colors.black;

    // 显示不匹配提示的条件：已设置初始PIN + 输入完4位确认PIN + PIN不匹配
    if (provider.isPinSet && provider.isConfirmPinEntered && !provider.isPinMatched) {
      return Text(
        'Entered PIN does not match.',
        style: TextStyle(
          color: Colors.red,
        ),
      );
    } else {
      return Text(
        'Pin must be at least 4 digits. It must not be single digits like'
        ' 1111 or digits in numerical order such as 1234',
        style: TextStyle(
          color: ruleTextColor,
        ),
      );
    }
  },
),

效果说明 #

• 输入PIN过程中（未到4位），不会显示不匹配提示
• 输入完4位不匹配的PIN后，才显示红色的"Entered PIN does not match"提示，随后自动清空输入框
• 输入正确PIN时，规则提示文本保持黑色
• 输入无效PIN（如1111、1234）时，规则文本显示红色

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