TextFormField颤动上没有小数分隔符的千位分隔符答案

【问题标题】：Thousand separator without decimal separator on TextFormField flutterTextFormField颤动上没有小数分隔符的千位分隔符
【发布时间】：2020-05-18 09:12:52
【问题描述】：

我使用flutter_masked_text 来格式化我的控制器以自动将千位分隔符添加到我的货币字段中。我正在使用它来实现它。

var controller = new MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');

我不喜欢它的工作方式，因为它从0.00 开始并自动从小数部分开始添加数字。如果我输入1000，它应该变成1,000 而不是1,000.00。有没有办法可以格式化我的控制器字段以添加千位分隔符而没有小数分隔符？

【问题讨论】：

标签： flutter dart textfield

【解决方案1】：

我有同样的问题，我之前找到了一个自定义输入格式化程序代码作为临时解决方案，它做同样的事情，然后我针对这个特定的体验对其进行了修改。如果有帮助，您可以尝试一下，并随时对其进行优化。

class DecimalFormatter extends TextInputFormatter {
  final int decimalDigits;

  DecimalFormatter({this.decimalDigits = 2}) : assert(decimalDigits >= 0);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, 
    TextEditingValue newValue,) {

      String newText;

      if (decimalDigits == 0) {
        newText = newValue.text.replaceAll(RegExp('[^0-9]'), '');
      }
      else {
        newText = newValue.text.replaceAll(RegExp('[^0-9\.]'), '');
      }

      if(newText.contains('.')) {
        //in case if user's first input is "."
        if (newText.trim() == '.') {
          return newValue.copyWith(
            text: '0.',
            selection: TextSelection.collapsed(offset: 2),
          );
        }
        //in case if user tries to input multiple "."s or tries to input 
        //more than the decimal place
        else if (
          (newText.split(".").length > 2) 
          || (newText.split(".")[1].length > this.decimalDigits)
        ) {
          return oldValue;
        }
        else return newValue;
      }

      //in case if input is empty or zero
      if (newText.trim() == '' || newText.trim() == '0') {
        return newValue.copyWith(text: '');
      } 
      else if (int.parse(newText) < 1) {
        return newValue.copyWith(text: '');
      }

      double newDouble = double.parse(newText);
      var selectionIndexFromTheRight =
        newValue.text.length - newValue.selection.end;

      String newString = NumberFormat("#,##0.##").format(newDouble);

      return TextEditingValue(
        text: newString,
        selection: TextSelection.collapsed(
          offset: newString.length - selectionIndexFromTheRight,
        ),
      );
    }
}

【讨论】：

这行得通。但是，有一个问题。如果我尝试使用控制器从表单字段中提取字符串并将其解析为双精度，则逗号随之而来，因此它一直给我一个异常。

【解决方案2】：

我从未尝试过这个包，但是我可以看到MoneyMaskedTextController() 有一个precision 参数。

试试这样的：

var controller = new MoneyMaskedTextController(precision: 0, decimalSeparator: '.', thousandSeparator: ',');

【讨论】：

【解决方案3】：

我使用自定义文本输入格式化程序来做类似的事情：

class CustomTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length == 0) {
      return newValue.copyWith(text: '');
    } else if (newValue.text.compareTo(oldValue.text) != 0) {
      int selectionIndexFromTheRight =
          newValue.text.length - newValue.selection.extentOffset;
      List<String> chars = newValue.text.replaceAll(' ', '').split('');
      String newString = '';
      for (int i = 0; i < chars.length; i++) {
        if (i % 3 == 0 && i != 0) newString += ' ';
        newString += chars[i];
      }

      return TextEditingValue(
        text: newString,
        selection: TextSelection.collapsed(
          offset: newString.length - selectionIndexFromTheRight,
        ),
      );
    } else {
      return newValue;
    }
  }
}

然后在你的 TextField 上：

TextField(
   controller: _textController,
   keyboardType: TextInputType.number,
   inputFormatters: [CustomTextInputFormatter()],
)

【讨论】：