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

1,140 阅读1分钟

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

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

完毕