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

Posted 2022-04-29 Code-Porter

先来看下效果图吧

实现思路

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

///输入框控制器
TextEditingController _controller = TextEditingController();

///输入框
CupertinoTextField(
  controller: _controller,
  placeholder: '请输入银行卡号',
  ///省略部分代码
  inputFormatters: [
    TextInputFormatter.withFunction(
      (oldValue, newValue) =>
          TextEditingValue(text: _addSeparator(newValue.text)),
    ),
  ],
  onChanged: (text) 
    ///移动光标位置
    _controller.selection = TextSelection.fromPosition(
      TextPosition(
          offset: text.length, affinity: TextAffinity.upstream),
    );
  ,
),

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

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