如何限制flutter中输入的文本字段的长度?

zfycwa2u  于 2023-05-29  发布在  Flutter
关注(0)|答案(9)|浏览(389)

TextField小部件似乎没有“limit”属性来限制可以键入的字符数。如何强制在TextField Widget中只能提供一定数量的字符作为输入。我试着看看装修物业,并可能在那里设置限制,但似乎也不起作用。有没有其他的widget我应该使用?

ipakzgxi

ipakzgxi1#

使用inputFormatters属性
示例:

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

命名空间

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

gk7wooem2#

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

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

rryofs0p3#

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

TextField(
  maxLength: 45,
)
pb3skfrl

pb3skfrl4#

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

vwoqyblh5#

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

    }
)

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

ddrv8njm

ddrv8njm6#

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

h7wcgrx3

h7wcgrx37#

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

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

55ooxyrt8#

有两种方法

方案一

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

6za6bjd09#

您可以使用以下代码裁剪limit lengthhide counter

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

原始答案你可以在这里找到。

相关问题