耶耶耶耶耶 发表于 2024-10-2 14:49:33

Flutter自定义TextInputFormatter实现金额输入框,同时解决iOS数字键盘不能

一、实现的效果

https://i-blog.csdnimg.cn/blog_migrate/0aef98dfa7bf23f22b8a2bd3adb32a73.gif 二、金额输入框基本要求



[*]只能输入.和数字
[*]小数点后只能有俩位
[*]小数点不能作为开头
三、在iOS装备上这里另有个坑,数字键盘上这个小数点会根据你手机设置的不同国家地区来决定表现是.照旧, 如下

https://i-blog.csdnimg.cn/blog_migrate/040fa518899c37f83622302c588ee9b2.jpeg https://i-blog.csdnimg.cn/blog_migrate/c717029d67b08916694e32a32607bc12.jpeg   所以这个时候最好的解决办法是答应输入.、数字和,然后在动态的将,替换成.
四、完整代码

import 'package:flutter/services.dart';

class AmountTextFieldFormatter extends FilteringTextInputFormatter {
final int digit;
final String _decimalComma = ',';
final String _decimalDot = '.';
String _oldText = '';

AmountTextFieldFormatter({
    this.digit = 2,
    bool allow = true,
}) : super(RegExp(''), allow: allow);

@override
TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
) {
    ///替换`,`为`.`
    if (newValue.text.contains(_decimalComma)) {
      newValue = newValue.copyWith(
      text: newValue.text.replaceAll(_decimalComma, _decimalDot),
      );
    }
    final handlerValue = super.formatEditUpdate(oldValue, newValue);
    String value = handlerValue.text;
    int selectionIndex = handlerValue.selection.end;

    ///如果输入框内容为.直接将输入框赋值为0.
    if (value == _decimalDot) {
      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 == _decimalDot) {
      count++;
      }
    });
    return count;
}

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: Flutter自定义TextInputFormatter实现金额输入框,同时解决iOS数字键盘不能