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