Flutter：在TextInputFormatter中使用NumberFormat [英] Flutter: Using NumberFormat in TextInputFormatter

问题描述

我正在尝试在 TextInputFormatter 中使用 NumberFromatter ，但是当我尝试使用它时，它完全混乱了！这是我的 TextInputFormatter 实现代码：

 类NumericTextFormatter扩展了TextInputFormatter {
 TextEditingValue formatEditUpdate（TextEditingValue oldValue，TextEditingValue newValue）{
 if（newValue.text.length> 0）{
 int num = int.parse（newValue.text.replaceAll（'，'， ''））; 
 final f = new NumberFormat（＃，###）; 
返回newValue.copyWith（text：f.format（num））; 
}否则{
返回newValue.copyWith（text：’’）; 
} 
} 
} 
  

因此，当我添加此格式化程序时到 TextField 并尝试输入1到9，我希望看到的内容如下： 123,456,789

但这是 TextField 中显示的内容：

  1 
 12 
 123 
 1,234 
 12,354<-从这里开始
 123,564 
 1,235,674 
 12,356,874<--并且再次发生
  

似乎光标在添加一个字符后移动。有人可以帮我吗？

解决方案

这是因为在格式化值之后，您要添加一个新字符，但是文本选择保持在相同位置，少一个字符，这会导致预期的行为

您可以像这样修改 TextInputFormatter ： / p>

已修复，支持所有语言环境并记住光标位置

  class NumericTextFormatter扩展了TextInputFormatter {
 @override 
 TextEditingValue formatEditUpdate（
 TextEditingValue oldValue，TextEditingValue newValue）{
 if（newValue.text.isEmpty）{
返回newValue.copyWith（text：''）; 
}否则if（newValue.text.compareTo（oldValue.text）！= 0）{
 final int selectionIndexFromTheRight = 
 newValue.text.length-newValue.selection.end; 
 final f = NumberFormat（＃，###）; 
最终数字= 
 int.parse（newValue.text.replaceAll（f.symbols.GROUP_SEP，’））; 
 final newString = f.format（number）; 
返回TextEditingValue（
文本：newString，
选择：TextSelection.collapsed（
偏移量：newString.length-selectionIndexFromTheRight），
）; 
} else {
返回newValue; 
} 
} 
} 
  

I'm trying to use NumberFromatter in TextInputFormatter but when I try to use it, it completely messed up! This is my TextInputFormatter implementation code:

class NumericTextFormatter extends TextInputFormatter {
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    if(newValue.text.length > 0) {
      int num = int.parse(newValue.text.replaceAll(',', ''));
      final f = new NumberFormat("#,###");
      return newValue.copyWith(text: f.format(num));
    } else { 
      return newValue.copyWith(text: '');
    }
  }
}

So when I add this formatter to a TextField and try to type 1 to 9, what I expect to see is something like: 123,456,789

But this is what shows in TextField:

1
12
123
1,234
12,354 <- this is where it starts
123,564
1,235,674
12,356,874 <- and it happends again

It seems that cursor moves after adding one , character. So can anyone helps me with this?

解决方案

This is because after you format the value you are adding a new char but the the text selection remains at the same position, one char less, this cause an expected behavior

You can modified your TextInputFormatter like this :

Fixed to support all locales and to remember cursor position

class NumericTextFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.isEmpty) {
      return newValue.copyWith(text: '');
    } else if (newValue.text.compareTo(oldValue.text) != 0) {
      final int selectionIndexFromTheRight =
          newValue.text.length - newValue.selection.end;
      final f = NumberFormat("#,###");
      final number =
          int.parse(newValue.text.replaceAll(f.symbols.GROUP_SEP, ''));
      final newString = f.format(number);
      return TextEditingValue(
        text: newString,
        selection: TextSelection.collapsed(
            offset: newString.length - selectionIndexFromTheRight),
      );
    } else {
      return newValue;
    }
  }
}

这篇关于Flutter：在TextInputFormatter中使用NumberFormat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！