如何在 Flutter TextField 上使用 InputFormatter? [英] How to use InputFormatter on Flutter TextField?

问题描述

我需要在 TextField(inputFormatters: 中插入什么?

What do I need to insert into TextField(inputFormatters:?

我想在一个 TextField 中禁止 和 / 并且只允许 a 到 Z 在另一个.

I want to disallow and / in one TextField and only allow a to Z in another.

推荐答案

Formatters

在服务库中，您会找到TextInputFormatter abstract 类(这个意味着你必须导入package:flutter/services.dart).

Formatters

In the services library you will find the TextInputFormatter abstract class (this means that you have to import package:flutter/services.dart).

它已经有了实现，它们是FilteringTextInputFormatter(以前的BlacklistingTextInputFormatter 和WhitelistingTextInputFormatter)和LengthLimitingTextInputFormatter.

It already has implementations, which are FilteringTextInputFormatter (formerly BlacklistingTextInputFormatter and WhitelistingTextInputFormatter) and LengthLimitingTextInputFormatter.

如果你想实现自己的格式化程序，可以通过扩展TextInputFormatter 本身并实现 formatEditUpdate 在那里.

If you want to implement your own formatter, you can do so by extending TextInputFormatter itself and implementing formatEditUpdate in there.

我将展示如何在给定的上下文中应用预制的 FilteringTextInputFormatter.

I will show how to apply the premade FilteringTextInputFormatter with given context.

禁止 和 /

为此，我们将使用 FilteringTextInputFormatter.deny 构造函数:

For this we are going to use the FilteringTextInputFormatter.deny constructor:

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.deny(RegExp(r'[/\]')),
  ],
)

对于需要提供给格式化程序的 Pattern，我将使用 RegExp，即正则表达式.您可以在这里找到更多相关信息，这也将您链接到我将在示例中使用的功能.

For the Pattern, which needs to be supplied to the formatter, I will be using RegExp, i.e. regular expressions. You can find out more about that here, which also links you to the features I will be using in my examples.

请注意本示例中的双反斜杠 \ 和原始字符串 (r'').这在现实中仅代表一个反斜杠.这样做的原因是在RegExp中反斜杠是转义键，所以如果我们要匹配字符，我们需要使用两个反斜杠.我们甚至需要不带原始字符串的四重反斜杠 (r'')，因为 Dart 也使用反斜杠作为转义键.使用原始字符串将确保 Dart 不会转义字符.

Pay attention to the double backslash \ and the raw string (r'') in this example. This represents only a single backslash in reality. The reason for this is that backslashes are escape keys in RegExp, so we need to use two backslashes if we want to match the character. We would even need quadruple backslashes without the raw string (r'') because Dart also uses backslashes as escape keys. Using a raw string will ensure that Dart does not escape characters.

如果我们要阻止 a、b、F、! 和 .，我们也会把它放在一个列表 [...] 中，如下所示:

If we were to block a, b, F, !, and ., we would also put it in a list [...] like this:

FilteringTextInputFormatter.deny(RegExp('[abF!.]'))

这意味着拒绝/黑名单所有'a'、'b'、'F'、'!'和'.'".

This translates to "deny/blacklist all 'a', 'b', 'F', '!' and '.'".

只允许 a 到 Z

这次我们使用FilteringTextInputFormatter.allow 构造函数:

This time we use the FilteringTextInputFormatter.allow constructor:

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
  ],
)

为此，我们指定了两个字符范围:az 和 AZ，它们也将接受这两个字符之间的所有字符(这里是所有字母)指定的.这也适用于 0-9 并且您可以将任何字符附加到该列表中，例如a-zA-Z0-9!. 也会将 ! 和 . 考虑在内.

For this, we are specifying two ranges of characters: a-z and A-Z, which will also accept all the characters (here all the letters) in-between those two specified. This will also work for 0-9 and you can append any character to that list, e.g. a-zA-Z0-9!. will also take ! and . into account.

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
    FilteringTextInputFormatter.deny(RegExp('[abFeG]')),
  ],
)

这只是为了说明 inputFormatters 需要一个 List 并且可以组合多个格式化程序.实际上，您可以使用一个允许/白名单和一个正则表达式来解决这个问题，但这也确实有效.

This is only to show that inputFormatters takes a List<InputFormatter> and multiple formatters can be combined. In reality, you can solve this with one allow/whitelist and a regular expression, but this does work as well.

也已经包含了静态属性 在 FilteringTextInputFormatter 类:其中之一是 FilteringTextInputFormatter.digitsOnly.
它只会接受/允许数字，相当于一个 .allow(RegExp('[0-9]')) 格式化程序.

There are also already included static properties in the FilteringTextInputFormatter class: one of these is FilteringTextInputFormatter.digitsOnly.
It will only accept/allow digits and is equivalent to an .allow(RegExp('[0-9]')) formatter.

这篇关于如何在 Flutter TextField 上使用 InputFormatter?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！