Flutter 自定义 TextInputFormatter 文本输入过滤器 Flutter 实现输入4位自动添加空格
2023-09-11 14:14:53 时间
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。
如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。
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 {
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,
),
);
}
}
完毕
相关文章
- Flutter 设置input边框
- Flutter入门(四)--顶部导航+侧边栏+按钮
- flutter: 图片的fit取值(flutter 3.7.0)
- Flutter TextField 限制只允许输入数字,字母,小数,设置限制小数位数
- Flutter高级第1篇:ListView嵌套GridView、不同终端屏幕适配方案
- Flutter — 实现验证码倒计时功能
- Flutter原理 flutter架构、flutter UI系统、BuildContext、Widget与Element、命中测试hitTest、flutter显示流程分析
- flutter 做七天签到,本地记录有没有签到
- flutter的“video“:““
- Flutter 弹窗的setState用不了
- flutter的全局参数和列表添加参考
- Flutter之This app is using a deprecated version of the Android embedding.
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- Flutter之播放视频