flutter 项目实战工具类程序员

Flutter 文本输入控制

2022-11-28  本文已影响0人  呆头呆脑雷

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

数字输入限制,用于处理输入、粘贴控制。(最大、最小)超限控制逻辑

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
上一篇下一篇

猜你喜欢

热点阅读