Flutter 文本输入控制

输入过程中的限制控制逻辑，可以避免你在表单输入完成后的各种安全判断。

数字输入限制，用于处理输入、粘贴控制。（最大、最小）超限控制逻辑

CupertinoTextField(
  inputFormatters: [
     // 计数输入解决方案
     CounterTextInputFormatter(min: 1, max: 100),
  ],
  keyboardType: TextInputType.number,
  onChanged: (value) {
     print('[input]: onChanged - $value');
   },
);

源代码

class CounterTextInputFormatter extends TextInputFormatter {
  final int min;
  final int max;

  CounterTextInputFormatter({required this.min, required this.max});

  int get maxLength => '$max'.length;
  late final regExp = RegExp("^\\d{0,$maxLength}?\$");

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue ) {
    String oldText = oldValue.text;
    String newText = newValue.text;

    if (newText.isEmpty) {
      String text =  '$min';
      return TextEditingValue(
        text: text,
        selection: TextSelection(baseOffset: 0, extentOffset: text.length),
      );
    }
    // 判定 新输入值符合输入预期
    bool isValid = (oldText.length > newText.length) ||
        regExp.hasMatch(newText);
    
    if (isValid) {
      // 如果以0开头、转换为有效数字
      if (newText.startsWith('0')) {
        String text =  int.parse(newText).toString();
        return TextEditingValue(
          text: text,
          selection: TextSelection.collapsed(offset: text.length),
        );
      }
      return newValue;
    }

    return oldValue;
  }
}

image.png