[游戏开发] Flutter输入框实现银行卡输入每隔四位插入知道空格分割符

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> Flutter输入框实现银行卡输入每隔四位插入知道空格分割符 -> 正文阅读

[游戏开发]Flutter输入框实现银行卡输入每隔四位插入知道空格分割符

先来看下效果图吧

实现思路

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,
    ),
  );
}