Flutter自定义TextInputFormatter实现金额输入框

一、金额输入框智能输入数字、小数点且只能有俩位小数,比如:

0.01、0.1、100

二、这里可以通过继承已有的FilteringTextInputFormatter来实现会更方便些,首先要设置的就是只允许输入数字、小数点


class AmountTextFieldFormatter extends FilteringTextInputFormatter {
   
  final int digit;

  AmountTextFieldFormatter({
   
    this.digit = 2,
    bool allow = true,
  }) : super(RegExp('[0-9.]'), allow: allow);

  ///省略部分代码...
 }

三、上面这样就限定好了输入内容,接下来就是进行输入的合法判断了

class AmountTextFieldFormatter extends FilteringTextInputFormatter {
   
  final int digit;
  String _oldText = '';
  
  ///省略构造函数
  
  
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
   
    final handlerValue = super.formatEditUpdate(oldValue, newValue);
    String value = handlerValue.text;
    int selectionIndex = handlerValue.selection.end;

    ///如果输入框内容为.直接将输入框赋值为0.
    if (value == '.') {
   
      value = '0.';
      selectionIndex++;
    }
    ///判断小数位数
    if (_getValueDigit(value) > digit || _pointCount(value) > 1) {
   
      value = _oldText;
      selectionIndex = _oldText.length;
    }
    _oldText = value;
    return TextEditingValue(
      text: value,
      selection: TextSelection.collapsed(offset: selectionIndex),
    );
  }

  ///输入多个小数点的情况
  int _pointCount(String value) {
   
    int count = 0;
    value.split('').forEach((e) {
   
      if (e == '.') {
   
        count++;
      }
    });
    return count;
  }

  ///获取目前的小数位数
  int _getValueDigit(String value) {
   
    if (value.contains('.')) {
   
      return value.split('.')[1].length;
    } else {
   
      return -1;
    }
  }
}

至此就完成了一个只能输入金额格式的输入限定了

最近更新

  1. TCP协议是安全的吗?

    2023-12-07 14:22:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-07 14:22:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-07 14:22:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-07 14:22:06       18 阅读

热门阅读

  1. Hadoop学习笔记(HDP)-Part.04 基础环境配置

    2023-12-07 14:22:06       35 阅读
  2. 创建用户 admin 并授予 sudo管理员权限的方法

    2023-12-07 14:22:06       39 阅读
  3. 数据分析NumPy

    2023-12-07 14:22:06       37 阅读
  4. TCP 连接建立

    2023-12-07 14:22:06       32 阅读
  5. 支持向量机(SVM)

    2023-12-07 14:22:06       31 阅读
  6. js优化技巧

    2023-12-07 14:22:06       37 阅读