Flutter 自定义 TextInputFormatter 文本输入过滤器 Flutter 实现输入4位自动添加空格

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创造的内容，有一种执着，就是不知为什么，假如你苍茫，不妨来瞅瞅码农的轨道。

1 作用预览

TextField(
      //弹出的输入键盘为数字键盘
      keyboardType: TextInputType.number,
      //输入文本过滤器
      inputFormatters: [
        //只允许输入数字
        FilteringTextInputFormatter.digitsOnly,
        //只允许输入 19位以内
        LengthLimitingTextInputFormatter(19),
        //自定义的输入过滤器
        CardNumberInputFormatter(),
      ],
    ) 

inputFormatters 是对输入文件的校验

2 自定义 TextInputFormatter 文本输入过滤器

TextEditingValue 设置输入框光标方位 ，selection 特点用来设置光标的方位 ，特点操作如下

• int baseOffset：开端的方位
• int extentOffset：结束的方位
• TextAffinity affinity：光标的方位

class CardNumberInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    print(" baseoffse is  ${newValue.selection.baseOffset}");
    //光标的方位 从0开端
    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }
    //获取输入的文本
    String inuptData = newValue.text;
    //创建字符缓存体
    StringBuffer stringBuffer = new StringBuffer();
    for (int i = 0; i < inuptData.length; i++) {
      //获取每一个字条 inuptData[i]
      stringBuffer.write(inuptData[i]);
      //index 当时字条的方位
      int index = i + 1;
      //每四个字条中心增加一个空格 最终一位不在考虑范围里
      if (index % 4 == 0 && inuptData.length != index) {
        stringBuffer.write("  ");
      }
    }
    return TextEditingValue(
      //当时的文本
      text: stringBuffer.toString(),
      //光标的方位
      selection: TextSelection.collapsed(
        //设置光标的方位在 文本最终
        offset: stringBuffer.toString().length,
      ),
    );
  }
}

完毕