flutter - 如何在 Flutter 中实现文本掩码

Question

如标题所述，如何在 Flutter 中实现文本掩码。
我只是在下面写了一个，但不太合适，因为它在输入时无法向用户显示掩码，例如，当文本掩码为“MM/HH”时，如果我们在用户输入期间不显示斜杠键入时，用户将自己键入斜杠“/”，因为他们不知道斜杠会自动填充输入。有一个example这里可以解释我在说什么(这是一个网络实现，而不是 Flutter)，那么如何在 Flutter 中实现这个链接中的类似掩码？
这是我目前的实现。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MaskedTextInputFormatter extends TextInputFormatter {
  final String mask;
  final String separator;

  MaskedTextInputFormatter({
    @required this.mask,
    @required this.separator,
  }) {
    assert(mask != null);
    assert(separator != null);
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > 0) {
      if (newValue.text.length > oldValue.text.length) {
        if (newValue.text.length > mask.length) return oldValue;
        if (newValue.text.length < mask.length &&
            mask[newValue.text.length - 1] == separator) {
          return TextEditingValue(
            text:
                '${oldValue.text}$separator${newValue.text.substring(newValue.text.length - 1)}',
            selection: TextSelection.collapsed(
              offset: newValue.selection.end + 1,
            ),
          );
        }
      }
    }
    return newValue;
  }
}

任何帮助表示赞赏!
PS:我搜索了一个 Flutter 包 mask_text_input_formatter , 好像打字时也不能显示掩码，见 issue .

Answer 1

尝试添加额外的条件来修改文本值

添加 1 个额外条件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MaskedTextInputFormatter extends TextInputFormatter {
  final String mask;
  final String separator;

  MaskedTextInputFormatter({
    @required this.mask,
    @required this.separator,
  }) {
    assert(mask != null);
    assert(separator != null);
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length > 0) {
      if (newValue.text.length > oldValue.text.length) {
        if (newValue.text.length > mask.length) return oldValue;
        if (newValue.text.length < mask.length &&
            mask[newValue.text.length - 1] == separator &&
            newValue.text.substring(newValue.text.length - 1) != separator) {
          return TextEditingValue(
            text:
                '${oldValue.text}$separator${newValue.text.substring(newValue.text.length - 1)}',
            selection: TextSelection.collapsed(
              offset: newValue.selection.end + 1,
            ),
          );
        }
      }
    }
    return newValue;
  }
}

根据您的需要使用正则表达式。

  FilteringTextInputFormatter(r"[A-za-z][A-Za-z]\/[A-za-z][A-Za-z]", allow: false);

或者

     FilteringTextInputFormatter(r"[A-za-z0-9][A-Za-z0-9]\/[A-za-z0-9][A-Za-z0-9]", allow: false);

示例如下
allow 参数用于是否允许接受特定模式

Textfield(
  label: "CardNumber",
  hint: "CardNumber",
  focusNode: cardNumberFocus,
  textInputFormatter: [
    MaskedTextInputFormatter(mask: 'xxxx xxxx xxxx xxxx', separator: ' '),
    FilteringTextInputFormatter(r"[A-za-z0-9][A-Za-z0-9]\/[A-za-z0-9][A-Za-z0-9]", allow: true);
  ],
);