Flutter输入框实现银行卡输入 每隔四位插入空格进行分割

Posted 2022-10-25 Code-Porter

先来看下效果图吧

实现思路

1、利用输入框的TextInputFormatter的withFunction方法来处理用户输入的内容
2、同时需要监听文本改变将光标移动至末尾

///输入框
CupertinoTextField(
  controller: _controller,
  placeholder: '请输入银行卡号',
  ///省略部分代码
  inputFormatters: [
    TextInputFormatter.withFunction(
    	(oldValue, newValue) => _addSeparator(newValue.text)),
  ],
),

添加分隔符的方法，这里我使用的是空格分隔；你也可以换成你想要的符号

///银行卡号每四位加一个分隔符
TextEditingValue _addSeparator(String text, String separator = " ") 
  if (text.isEmpty) 
    return TextEditingValue(text: text);
  
  ///移除了分隔符
  var removeSeparator = text.replaceAll(separator, "");
  var list = removeSeparator.split("");
  int separatorCount = 0;
  for (var i = 0; i < removeSeparator.length; i = i + 4) 
    if (i == 0) continue;
    list.insert(i + separatorCount, separator);
    separatorCount++;
  
  var endText = list.join("");
  return TextEditingValue(
    text: endText,
    selection: TextSelection(
      baseOffset: endText.length,
      extentOffset: endText.length,
      affinity: TextAffinity.upstream,
    ),
  );