flutter 键入时在TextField中使用逗号分隔符格式化数字

2vuwiymt 于 2023-01-31 发布在 Flutter

关注(0)|答案(2)|浏览(411)

我想在Flutter中使用逗号分隔符，以便在键入时将数字格式化为以下格式："#,##,##,###.##"，但我不想包括小数位，除非我们键入。ThousandsFormatter类正在按预期格式化数字，但它不允许小数输入。我想在必要时允许最多两个小数输入，而不影响数字格式。
下面是一些我希望在代码中使用的数字格式示例：1,00,00,00015,000.3423,12,340.45、45,434.5、55,334等。不带小数的数字输入工作正常。
它还有一个关于逗号的问题。它将逗号的计数添加到TextField输入的maxLength中。因此，为了输入八位数字，我将maxLength设置为十一位。
任何建议将不胜感激。以下是我尝试过的代码：

- 类千位格式化程序：**

import 'package:flutter/services.dart';
    import 'package:intl/intl.dart';

    class ThousandsFormatter extends TextInputFormatter {
    @override
    TextEditingValue formatEditUpdate(
    TextEditingValue oldValue, TextEditingValue newValue) {
    final newText = newValue.text;
    if (newText.isEmpty) {
      return newValue;
    }
    int selectionIndex = newValue.selection.end;
    final String newTextFormatted = NumberFormat("#,##,##,###")
        .format(double.tryParse(newText.replaceAll(",", "")));
    if (newText == newTextFormatted) {
      return newValue;
    }
    selectionIndex += -(newText.length - newTextFormatted.length);
    return TextEditingValue(
      text: newTextFormatted,
      selection: TextSelection.collapsed(offset: selectionIndex),
        );
      }
    }

- 主省道**

TextField(
    onEditingComplete: () {
    FocusScope.of(context).requestFocus(_focusNodeY);
    },
    controller: principalController,
    decoration: InputDecoration(
    labelText: "Amount",
    isDense: true,
    counterText: "",     
    ),
    textAlign: TextAlign.start,
    maxLines: 1,
    maxLength: 11,
    keyboardType: TextInputType.number,
    inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    FilteringTextInputFormatter.allow(
    RegExp(r'^[0-9]+(\.[0-9]{0,2})?$')),
    ThousandsFormatter(),
    ],
    ),

flutter

来源：https://stackoverflow.com/questions/75268310/formatting-digits-with-comma-separator-in-the-textfield-while-typing

2条答案

按热度按时间

pes8fvy91#

根据您提供的代码，看起来您使用了ThousandsFormatter类将输入格式化为带有千位分隔符的数字，但您还使用了FilteringTextInputFormatter类以仅允许数字和最多两位小数。
若要允许小数位而不影响千位分隔符的格式，可以修改ThousandsFormatter类以检查输入是否包含小数点，如果包含，则将数字格式设置为小数点，并保留小数位不变。例如：

class ThousandsFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue, TextEditingValue newValue) {
    final newText = newValue.text;
    if (newText.isEmpty) {
      return newValue;
    }
    int selectionIndex = newValue.selection.end;
    String newTextFormatted;
    if (newText.contains('.')) {
      final parts = newText.split('.');
      newTextFormatted = NumberFormat("#,##,##,###").format(double.tryParse(parts[0].replaceAll(",", ""))) + '.' + parts[1];
    } else {
      newTextFormatted = NumberFormat("#,##,##,###").format(double.tryParse(newText.replaceAll(",", "")));
    }
    if (newText == newTextFormatted) {
      return newValue;
    }
    selectionIndex += -(newText.length - newTextFormatted.length);
    return TextEditingValue(
      text: newTextFormatted,
      selection: TextSelection.collapsed(offset: selectionIndex),
    );
  }
}

这样，如果输入包含小数点，它将格式化数字直到小数点并保留小数位，如果不包含小数点，它将使用千位分隔符格式化整个数字。
关于TextField的maxLength，您可以在计算TextField的maxLength时从inputFormatter列表中删除ThousandsFormatter。

赞(0）回复(0）举报 2023-01-31

6l7fqoea2#

试试这个

var f = NumberFormat("#,##,##,###.##", "en_US");
        print(f.format(18));
        print(f.format(180000.00));

赞(0）回复(0）举报 2023-01-31

我来回答

flutter 键入时在TextField中使用逗号分隔符格式化数字

2条答案

相关问题

热门标签

最新问答