Flutter TextField maxLength 未强制执行

Question

我正在实现两个简单的对话框，以允许用户在我的应用程序中编辑两个设置。它们非常相似，正如您从代码中看到的那样。第一个，用来输入一个5位数字（我后面把String转成数字）：

var tfController = TextEditingController();
String newPort = await showDialog<String>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: Center(
            heightFactor: 1,
            child: TextField(
              controller: tfController,
              keyboardType: TextInputType.number,
              maxLength: 5,
              autofocus: true,
              decoration: InputDecoration(labelText: "Insert number:"), 
              onEditingComplete: () {
                Navigator.of(context).pop(tfController.text);
              },
            )),
        actions: [
          FlatButton(
            child: Icon(Icons.done),
            onPressed: () {
              Navigator.of(context).pop(tfController.text);
            },
          ),
          FlatButton(
              child: Icon(Icons.clear),
              onPressed: () {
                Navigator.of(context).pop();
              })
        ],
      );
    });

第二个对话框，通用文本输入：

var tfController = TextEditingController();
String newHeader = await showDialog<String>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: Center(
            heightFactor: 1,
            child: TextField(
              controller: tfController,
              keyboardType: TextInputType.text,
              maxLength: 30,
              maxLengthEnforced: true, //added later even if it's true by default, doesn't change anything
              autofocus: true,
              decoration: InputDecoration(labelText: "Insert text:"),
              onEditingComplete: () {
                Navigator.of(context).pop(tfController.text);
              },
            )),
        actions: [
          FlatButton(
            child: Icon(Icons.done),
            onPressed: () {
              Navigator.of(context).pop(tfController.text);
            },
          ),
          FlatButton(
              child: Icon(Icons.clear),
              onPressed: () {
                Navigator.of(context).pop();
              })
        ],
      );
    });

第一个对话框完美运行：需要时，它会弹出已聚焦的字段，键盘仅显示数字，输入长度自动限制为 5，正如预期的那样。因此，当我需要用户输入有限的文本字符串时，我只需复制代码，只改变长度。一切似乎都很好，所以一开始我什至懒得去检查 maxLength 是否被强制执行：很久以后我才发现，第二个对话框允许用户超过最大长度，尽管它是正确的将提示和下划线的颜色更改为红色，让用户知道出了点问题。

我知道我可以很容易地为此设置一个变通办法，比如在用户确认输入后截断字符串，但问题更多的是为什么这两个对话框的行为不同而不是如何解决这个.

Answer 1

我不确定它有时是否有效，我在使用 maxLength 时遇到了同样的问题，我已经使用 inputFormatters 属性解决了它。以下代码会将 textFormField 的长度限制为 30：

先导入包。 import 'package:flutter/services.dart';

new TextField(
  inputFormatters: [
    new LengthLimitingTextInputFormatter(30),
  ],
),

Answer 2

你应该仔细阅读official document。

maxLength property

The maximum number of characters (Unicode scalar values) to allow in the text field.

If set, a character counter will be displayed below the field showing how many characters have been entered. If set to a number greater than 0, it will also display the maximum number allowed. If set to TextField.noMaxLength then only the current character count is displayed.

After maxLength characters have been input, additional input is ignored, unless maxLengthEnforced is set to false. The text field enforces the length with a LengthLimitingTextInputFormatter, which is evaluated after the supplied inputFormatters, if any.

This value must be either null, TextField.noMaxLength, or greater than 0. If null (the default) then there is no limit to the number of characters that can be entered. If set to TextField.noMaxLength, then no limit will be enforced, but the number of characters entered will still be displayed.

Whitespace characters (e.g. newline, space, tab) are included in the character count.

If maxLengthEnforced is set to false, then more than maxLength characters may be entered, but the error counter and divider will switch to the decoration's InputDecoration.errorStyle when the limit is exceeded.

Limitations The text field does not currently count Unicode grapheme clusters (i.e. characters visible to the user), it counts Unicode scalar values, which leaves out a number of useful possible characters (like many emoji and composed characters), so this will be inaccurate in the presence of those characters. If you expect to encounter these kinds of characters, be generous in the maxLength used.

For instance, the character "ö" can be represented as '\u{006F}\u{0308}', which is the letter "o" followed by a composed diaeresis "¨", or it can be represented as '\u{00F6}', which is the Unicode scalar value "LATIN SMALL LETTER O WITH DIAERESIS". In the first case, the text field will count two characters, and the second case will be counted as one character, even though the user can see no difference in the input.

Similarly, some emoji are represented by multiple scalar values. The Unicode "THUMBS UP SIGN + MEDIUM SKIN TONE MODIFIER", "", should be counted as a single character, but because it is a combination of two Unicode scalar values, '\u{1F44D}\u{1F3FD}', it is counted as two characters.

Here 就是您要找的。 @刺客有一个很好的答案。

Answer 3

问题变得无关紧要，因为 maxLengthEnforced 参数已被弃用并已被 maxLengthEnforcement 取代，后者具有更复杂的行为。

Answer 4

你需要升级到flutter 1.22.6

在控制台写命令：

flutter version 1.22.6

Flutter TextField maxLength 未强制执行

Flutter TextField maxLength not enforced

maxlength

textfield

flutter