Flutter 模糊某些文本

Question

大家好，我在 Flutter 中面临模糊文本的问题

要求：

在 TextFormField 中输入时遮盖文本的前 5 个字符。

示例：XXXXX4307R

但是我必须模糊 TextFormField 中的文本，并且还必须保留另一侧的原始纯文本。

我面临的问题是，每当我在 TextFormField 中输入不正确的字符并点击退格键并再次输入新字符时，onChange() 方法就会触发并获取最新的替换值并返回 XXXXX4307R 中的值，即它会覆盖存储的原始文本在变量中。

因此我们必须保留原始纯文本以及 TextFormField 中应用程序正面的模糊文本。

请提供任何可以在 Flutter 移动开发中解决此问题的新想法。

我正在使用replaceRange()函数将文本替换为“X”字符，但是一旦触发onChange，它就会覆盖变量中存储的现有原始文本。

Answer 1

您可以扩展

TextEditingController

并重写其

buildTextSpan

方法来实现该行为：

class ObscuringTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final text = value.text;
    final obscuredLength = min(text.length, 5);
    final obscuredText = text.replaceRange(0, obscuredLength, '•' * obscuredLength);
    return TextSpan(text: obscuredText, style: style);
  }
}

请注意，这只是出于示例目的的最小实现。它有效，但您可能需要了解原始

buildTextSpan

方法的其他方面，您可能还需要在重写方法中实现这些方面。