Question

我正在尝试找到一种在输入TextFormField时添加空格的方法。

一段时间后，我找到了一种方法来执行此操作，但是无论我在Google还是在StackOverflow上搜索什么，我现在都找不到。

基本上我想将文本字段中显示的文本从000011112222333变成0000 1111 2222 3333

我猜我需要在RegExp的{{1}}函数中使用一些onChanged检查并使用它来更改TextFormField的{{1} }

Answer 1

我之前也遇到过这个问题，很幸运地找到了在某处进行此操作的方法。首先创建一个扩展TextInputFormatter的类

customInputFormatter.dart

class CustomInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    var text = newValue.text;

    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    var buffer = new StringBuffer();
    for (int i = 0; i < text.length; i++) {
      buffer.write(text[i]);
      var nonZeroIndex = i + 1;
      if (nonZeroIndex % 4 == 0 && nonZeroIndex != text.length) {
        buffer.write(' '); // Replace this with anything you want to put after each 4 numbers
      }
    }

    var string = buffer.toString();
    return newValue.copyWith(
        text: string,
        selection: new TextSelection.collapsed(offset: string.length)
    );
  }
}

然后将其添加到TextFormField的inputFormatters []列表中

inputFormatters: [
   FilteringTextInputFormatter.digitsOnly,
   new CustomInputFormatter()
],

Answer 2

灵感来自 Dung Ngo 的代码

我添加了光标跟踪，因此当用户从 TextFormField 中擦除时，光标不会回到字段的开头。

因为我使用了正则表达式，所以我在我的笔中评论了 WhitelistingTextInputFormatter.digitsOnly / FilteringTextInputFormatter.digitsOnly。

这是笔 https://codepen.io/brocatz/pen/dyNOqVy

@override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    var text = newValue.text;
    text = text.replaceAll(RegExp(r'(\s)|(\D)'), '');

    int offset = newValue.selection.start;
    var subText =
        newValue.text.substring(0, offset).replaceAll(RegExp(r'(\s)|(\D)'), '');
    int realTrimOffset = subText.length;

    // if (newValue.selection.baseOffset == 0) {
    //   return newValue;
    // }

    var buffer = new StringBuffer();
    for (int i = 0; i < text.length; i++) {
      buffer.write(text[i]);
      var nonZeroIndex = i + 1;
      if (nonZeroIndex % 4 == 0 && nonZeroIndex != text.length) {
        buffer.write(
            ' '); // Replace this with anything you want to put after each 4 numbers
      }


      if (nonZeroIndex % 4 == 0 &&
          subText.length == nonZeroIndex &&
          nonZeroIndex > 4) {
        int moveCursorToRigth = nonZeroIndex ~/ 4 - 1;
        realTrimOffset += moveCursorToRigth;
      }

      if (nonZeroIndex % 4 != 0 && subText.length == nonZeroIndex) {
        int moveCursorToRigth = nonZeroIndex ~/ 4;
        realTrimOffset += moveCursorToRigth;
      }
    }

    var string = buffer.toString();
    return newValue.copyWith(
        text: string,
        selection: new TextSelection.collapsed(offset: realTrimOffset));
  }

Answer 3

在 flutter 2.2 中你应该使用 FilteringTextInputFormatter.allow(RegExp(r'[0-9]')) 而不是 FilteringTextInputFormatter.digitsOnly

如何：在TextFormField中键入时，每4个字符后添加一个空格

3 个答案: