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

zu0ti5jz  于 2022-11-25  发布在  Flutter
关注(0)|答案(9)|浏览(212)

TextField部件似乎没有“limit”属性来限制可以输入的字符数。我如何强制TextField部件只能提供特定数量的字符作为输入。我尝试查看装饰属性,并可能在那里设置限制,但似乎也不起作用。我应该使用其他部件吗?

mutmk8jj

mutmk8jj1#

使用输入格式化程序属性
例如:

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

命名空间

import 'package:flutter/services.dart';
mxg2im7a

mxg2im7a2#

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

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

pvabu6sv3#

maxLength属性在Flutter中可用。
https://docs.flutter.io/flutter/material/TextField/maxLength.html

TextField(
  maxLength: 45,
)
wsewodh2

wsewodh24#

我不得不在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;
        } 
    }
);
h6my8fg2

h6my8fg25#

您可以使用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;
        }

    }
)

我能够控制文本字段保持在指导方针内,因为如果它超过了它,它将恢复到上次类型之前的状态。

apeeds0o

apeeds0o6#

在1.25版本中,这就更容易了。maxLengthEnforced属性需要设置为true。否则上面的响应将不起作用。

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,
                    ),
                  ),
                ),

zlhcx6iw

zlhcx6iw7#

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

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

nqwrtyyt8#

您可以使用此代码剪切来限制长度隐藏计数器

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

您可以在此处找到原始答案。

siv3szwd

siv3szwd9#

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

解决方案一

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: '',
                  ///....

相关问题