如何在FLUTTER中使用信用卡日期格式mm/yy

ippsafx7  于 2023-05-18  发布在  Flutter
关注(0)|答案(4)|浏览(168)
child: new TextFormField(                             
   maxLength:5,                                        
   controller:                                         
       TextEditingController(text: donation.date),    
   onChanged: (value) {                                
     donation.date = value;                           
   },                                                  
   decoration: InputDecoration(                        
     suffixText: '',                                   
     suffixStyle: TextStyle(                           
       color: Color(0xffde0486),                       
     ),                                                 
     labelText: 'Expiry Date',                         
     border: OutlineInputBorder(),                     
   ),                                                   
   keyboardType: TextInputType.number,                 
   textInputAction: TextInputAction.done,              
   style: TextStyle(color: Colors.white),              
   autofocus: true,                                    
 ),

我有一段信用卡代码,我正在Flutter中实现。我想把mm/yy格式的文本字段。当用户输入月份时,文本字段应自动显示“/”。我该怎么做?

guicsvcw

guicsvcw1#

您可以使用onChange方法获得您的结果。您可以检查输入的长度,如果是2,则在文本中插入'/',即dd
1.你需要将控制器存储在一个单独的变量中,因为我们想在以后插入'/'时使用它:

var _controller = new TextEditingController(text: donation.date);

1.将此_controlleronChange回调添加到TextFormField

TextFormField(                                     
  controller: _controller, //<-- Add controller here
   onChanged: (value) {
     if(value.length == 2) _controller.text += "/"; //<-- Automatically show a '/' after dd
     donation.date = value;                     
   },
   ...                                    
 ),
enyaitl3

enyaitl32#

您可以尝试使用这个软件包flutter_multi_formatter来格式化Expiration Date字段和信用卡号字段。

arknldoa

arknldoa3#

更新!我刚找到一个包:flutter_masked_text2可以帮助您解决问题!

var controller = new MaskedTextController(mask: '00/00');
nfg76nw0

nfg76nw04#

这不是最好的,但它帮助了我。

final myController = TextEditingController();

late String? tmpValue;

...

_cursor();
TextInputField(
  controller: myController,
  onChanged: (value) {
    // check input is number or /
    if (RegExp(r'[^\d/]').hasMatch(value)) {
      return;
    }

    String cardNumber = value;
    bool isDash = (tmpValue ?? '').isEmpty
        ? true
        : (tmpValue ?? '').substring((tmpValue ?? '').length - 1) == '/';

    bool isBackSpace = ((tmpValue ?? '').length - value.length) == 1;

    // check backspace
    if (isDash && isBackSpace) {
      cardNumber = cardNumber.isEmpty
          ? cardNumber
          : cardNumber.substring(0, cardNumber.length - 1);
    }

    // check add /
    bool isRemoveDash = cardNumber.length >= 5;
    String addLine = cardNumber
        .replaceAll('/', '')
        .replaceAllMapped(RegExp(r'.{2}'), (match) => '${match.group(0)}/');
    if (isRemoveDash) {
      addLine = addLine.substring(0, addLine.length - 1);
    }

    tmpValue = addLine;
  },
)

...

_cursor() {
  var cursorPos = myController.selection.base.offset;
  myController.text = tmpValue;
  // over string range
  bool isOver = myController.text.length < cursorPos;

  // last is /
  bool isLast = myController.text.isEmpty
      ? true
      : myController.text.substring(myController.text.length - 1) == '/';
  isOver = isOver || isLast;

  myController.selection = TextSelection.collapsed(
      offset: isOver ? myController.text.length : cursorPos);
}

...

@override
void dispose() {
  super.dispose();
  myController.dispose();
}

未设置inputFormatters,因为显示将变得奇怪。
希望这对你有帮助。

相关问题