paypal - 金额输入，如 Flutter 中的 PayPal

Question

如何创建一个像 PayPal 一样格式化金额的 TextField，以便输入的数字被添加到右侧并移动到左侧？

例如，按1应该显示0,01而不是1。后跟一个2应该导致0,12. 并且在删除时，它应该在另一个方向上做同样的事情，这样0,12就变成了0,01.

标签： paypaldartfluttertextfieldtext-formatting

Answer 1

试试这个代码。它不太可读但有效：

TextField(
              keyboardType: TextInputType.number,
              controller: controller,
              onChanged: (str){
                String newVal;
                if(lastState.length<str.length){
                  String newChar = str.substring(str.length-1).trim();
                  int valueToAdd = int.parse(newChar);
                  int current = int.parse(lastState.replaceAll(r",", ""));
                  newVal = (current*10+valueToAdd).toString();
                } else
                if(lastState.length>str.length){
                  int currentValue = int.parse(lastState.replaceAll(r",", ""));
                  newVal = (currentValue ~/ 10).toString();
                }
                if(newVal.length<3){
                  int x = 3-newVal.length;
                  for(int i=0;i<x;i++){
                    newVal = "0$newVal";
                  }
                }
                lastState = newVal.replaceRange(newVal.length-2, newVal.length, ",${newVal.substring(newVal.length-2)}");
                setState(() {
                  controller.text = lastState;
                });
              },
            ),

在你的类扩展State添加：

String lastState = "0,00";
TextEditingController controller;

并在您的initState()方法中添加以下行：

controller = new TextEditingController(text: "0,00");