如何在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。

以上是如何在Flutter中实现文本掩码的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>