Flutter 实现卡号格式的显示和输入

这篇博客介绍了如何在Dart中扩展String类,增加一个名为`stringSeprate`的方法,用于将长字符串按指定长度和分隔符进行分隔,特别适用于显示卡号等长数字。此外,还展示了如何在`TextField`中使用`inputFormatters`来实现实时的输入格式化,每输入四个字符自动添加空格分隔,提升用户输入体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

卡号后自动使用空格或自定义分隔,如:1234 5678 9012 3456 789

 

扩展String类,增加分隔方法

extension StringSeprate on String {
  String stringSeprate({int count = 4, String separator = ','}) {
    if (this.isEmpty) {
      return '';
    }
    if (count < 1) {
      return this;
    }
    if (count >= this.length) {
      return this;
    }
    var str = this.replaceAll(separator, "");
    var chars = str.runes.toList();
    var namOfSeparation =
        (chars.length.toDouble() / count.toDouble()).ceil() - 1;

    int len = chars.length + namOfSeparation.round();
    var separatedChars = List.filled(len, "");
    var j = 0;
    for (var i = 0; i < chars.length; i++) {
      separatedChars[j] = String.fromCharCode(chars[i]);
      if (i > 0 && (i + 1) < chars.length && (i + 1) % count == 0) {
        j += 1;
        separatedChars[j] = separator;
      }

      j += 1;
    }

    return separatedChars.join();
  }
}

 文本显示

 Text('1212121212121212'.stringSeprate(count: 4)),

输入卡号时,显示分割,在TextField新增inputFormatters

/// TextField 中增加inputFormatters

 inputFormatters: [
                //每个字符使用空格分隔一次
                TextInputFormatter.withFunction((oldValue, newValue) =>
                    TextEditingValue(
                        text: newValue.text.stringSeparate(
                            separator: ' ',count:4)))
              ],

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值