logo标签列表

如何在Flutter的TextField中使用InputFormatter？

dartflutter
63

我需要在TextField(inputFormatters:中插入什么内容？

我想在一个TextField中禁止使用\和/，并且只允许在另一个TextField中输入从a到Z的字母。

5个回答
153

格式化程序

在服务库中，您将找到抽象类TextInputFormatter（这意味着您必须导入package:flutter/services.dart）。

它已经有了实现，其中包括FilteringTextInputFormatter（以前是BlacklistingTextInputFormatter和WhitelistingTextInputFormatter）和LengthLimitingTextInputFormatter。

如果您想要实现自己的格式化程序，可以通过扩展TextInputFormatter并在其中实现formatEditUpdate来实现。

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

示例

禁止 \ 和 /

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

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

对于需要提供给格式化程序的Pattern，我将使用RegExp，即正则表达式。您可以在此处了解更多信息，该链接还会将您链接到我在示例中使用的功能。

请注意在这个示例中双反斜杠 \\ 和原始字符串 (r'')。它实际上只代表一个反斜杠。之所以这样是因为反斜杠在 转义键 在 RegExp 中，所以如果我们想匹配\字符，就需要使用两个反斜杠。如果没有原始字符串(r'…')，甚至需要四个反斜杠(\\\\)，因为Dart也使用反斜杠作为转义键。使用原始字符串将确保Dart不会取消转义字符。

如果我们要阻止 a, b, F, ! 和 .，我们需要将它们放在一个列表 [...] 中，就像这样：

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

这句话的意思是“拒绝/黑名单中所有的'a'、'b'、'F'、'!'和'.'”。

只允许使用 a 到 Z

这次我们使用 FilteringTextInputFormatter.allow 构造函数：
TextField(
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]')),
  ],
)

为此，我们指定了两个字符范围：a-z和A-Z，它们还将接受这两个指定之间的所有字符（在这里是所有字母）。这也适用于0-9，您可以将任何字符附加到该列表中，例如a-zA-Z0-9！.还将考虑！和.。

我们可以将其组合使用

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

这只是为了展示inputFormatters接受一个List<InputFormatter>，并且多个格式化程序可以组合使用。实际上，您可以使用一个允许/白名单和正则表达式来解决这个问题，但这种方法也可以。

digitsOnly

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

我希望在调用textController.text =“phonenumber”时触发InputFormatters，有什么方法可以实现吗？ - Sanath
您也可以使用 '[a-z]/i' 进行不区分大小写的匹配，包括 A-Z。 - Son Nguyen
18

其他选项：

  • 小写字母：a-z

  • 大写字母：A-Z

  • 带重音的小写元音字母：á-ú

  • 带重音的大写元音字母：Á-Ú

  • 数字：0-9
  • 空格：（一个空格）

注意：空格用来更好地解释。

inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-z A-Z á-ú Á-Ú 0-9]"))
      ]
1
谢谢！关于“空格：（一个空格）”，非常简单。 - M E S A B O
18

BlacklistingTextInputFormatter和WhitelistingTextInputFormatter在版本1.20.0中已被标记为@Deprecated。

现在您可以使用FilteringTextInputFormatter来对TextField或TextFormField进行InputFormatter。

    inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^ ?\d*')),]
    inputFormatters: [FilteringTextInputFormatter.deny(' ')]
    inputFormatters: [FilteringTextInputFormatter.digitsOnly]

例如

  TextFormField(
            keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly
            ],
          ),
4

首先，您需要检查是否已导入以下软件包：

import 'package:flutter/services.dart';

然后您可以像以下这样使用它：
TextFormField(
  inputFormatters: [
    FilteringTextInputFormatter(RegExp("[a-zA-Z]"), allow: true),
  ]);
-1
import 'package:flutter/services.dart';

在TextFormField中使用这些参数。

maxLength: 5,
keyboardType: TextInputType.number,
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly,],
3
虽然这个答案可能是正确的，但仅包含代码的回答很少有帮助。请注释您的代码并解释这个代码如何解决问题。 - RyanNerd
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接