如何限制 flutter 中文本字段的大小？

Question

TextField 小部件似乎没有 "limit" 属性来限制可以键入的字符数。我如何强制只能提供一定数量的字符作为 TextField 小部件中的输入。我尝试查看装饰属性并可能以某种方式在那里设置限制，但这似乎也没有用。我应该使用其他小部件吗？

Answer 1

您可以使用 TextEditingController 控制有关文本字段的所有内容。因此，如果您要将此信息与来自 TextField 的 onChanged 事件配对，您可以在其中执行您喜欢的任何逻辑。例如：

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChanged: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.text = text;
        }

    }
)

我能够控制文本字段保持在准则范围内，因为如果超过它，它将恢复到上次输入之前的状态。

Answer 2

我不得不在 RSproute 提到的内容中添加一个额外的片段。完整代码在这里：

TextEditingController _controller = new TextEditingController();
String text = ""; // empty string to carry what was there before it 
onChanged
int maxLength = ...
...
new TextField(
    controller: _controller,
    onChange: (String newVal) {
        if(newVal.length <= maxLength){
            text = newVal;
        }else{
            _controller.value = new TextEditingValue(
                text: text,
                selection: new TextSelection(
                    baseOffset: maxLength,
                    extentOffset: maxLength,
                    affinity: TextAffinity.downstream,
                    isDirectional: false
                ),
                composing: new TextRange(
                    start: 0, end: maxLength
                )
            );
            _controller.text = text;
        } 
    }
);

Answer 3

maxLength 属性在 Flutter 中可用。

https://docs.flutter.io/flutter/material/TextField/maxLength.html

TextField(
  maxLength: 45,
)

Answer 4

您可以使用 maxLength 属性并且您仍然可以通过将 counterText 设置为空字符串来隐藏底部计数器文本。

TextField(
  maxLength: 10,
  decoration: InputDecoration(
    counterText: ''
  ),
)

Answer 5

使用inputFormatters 属性

示例：

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(10),
      ]
    )

命名空间

import 'package:flutter/services.dart';

Answer 6

您可以使用此代码段限制长度 和隐藏计数器:

TextFormField(
   maxLength: 10,
   buildCounter: (BuildContext context, { int currentLength, int maxLength, bool isFocused }) => null,
);

您可以找到原始答案 here。

Answer 7

有了 1.25 版，这就更容易了。 maxLengthEnforced 属性需要设置为真。否则上面的响应将不起作用。

     Container(
                  margin: EdgeInsets.only(right: 5),
                  child: SizedBox(
                    width: 70,
                    child: TextField(
                      keyboardType: TextInputType.number,
                      maxLengthEnforced: true,
                      maxLength: 2,
                      decoration: InputDecoration(
                        labelText: 'Hours',
                        counterText: '',
                      ),
                      controller: hourField,
                    ),
                  ),
                ),

Answer 8

有两种方法可以做到这一点

方案一

LengthLimitingTextInputFormatter 创建一个格式化程序，防止插入超过限制的字符。

      TextField(              
              inputFormatters: [
                new LengthLimitingTextInputFormatter(5), /// here char limit is 5
              ],
                ///....
              )

方案二：

          TextField(
                  maxLength: 5, /// here char limit is 5

如果您不想在 TextField 底部显示计数器文本，请在 InputDecoration

中添加空白 counterText

示例：

TextField(
              maxLength: 100,
              decoration: InputDecoration(
                  counterText: '',
                  ///....

Answer 9

您可以在输入格式化程序中设置 LengthLimitingTextInputFormatter

TextField(
   keyboardType: TextInputType.number,
   inputFormatters: [
     FilteringTextInputFormatter.digitsOnly,
     LengthLimitingTextInputFormatter(n,), //n is maximum number of characters you want in textfield
   ],
),

如何限制 flutter 中文本字段的大小？

How can I limit the size of a text field in flutter?

textfield

flutter