How can I hide letter counter from bottom of TextField in Flutter

enter image description here

I'm facing a small problem. As you can see, i have set maxLength 1 of TextField in Flutter, But i'm unable to hide bottom label of text counter.

86886 次浏览

这是正确的方法,它将防止额外的空间下面的文本字段,也避免额外的代码设置一个空小部件。

可以在 TextField中使用输入格式化程序

以下是:

    inputFormatters:[
LengthLimitingTextInputFormatter(1),
]

谢谢!

你可以通过在 短文字段内部添加 counterText: ''来隐藏计数器。它只会显示一个空字符串。

若要在使用 maxLength属性时对 文本字段TextFormField小部件隐藏计数器值,请尝试以下操作:

TextField(
decoration: InputDecoration(
hintText: "Email",
counterText: "",
),
maxLength: 40,
),

在这里,我在 InputDecoration属性中设置了 counterText属性,值为空。希望对您有所帮助。

您可以使用 InputDecoratoin 来隐藏字母计数器。

TextFormField(
decoration: InputDecoration(
labelText: "username",
counterStyle: TextStyle(height: double.minPositive,),
counterText: ""
)

你可以这样做:

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

另一种解决方案是使用 SizedBox 隐藏计数器小部件:

TextFormField(
...
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
counter: new SizedBox(
height: 0.0,
)),
...
)

只需将字符串设置为 Offstage ()就可以了。

TextField(
maxLines: 1,
decoration: InputDecoration(
counter: Offstage(),
),
),

大多数答案似乎都有效。另一种方法是给计数器分配一个缩小的 SizeBox。

TextField(decoration: InputDecoration(
hintText: "Email",
counter: SizedBox.shrink()
),
maxLength: 40,
),

无论何时你不需要什么东西,只要放一个空容器就可以了!

TextField(
decoration: InputDecoration(
hintText: "Email",
counter: Container(),
),
maxLength: 20,
),

使用高度和宽度为零的 SizedBox:

TextField(
maxLength: 400,
decoration: InputDecoration(
counter: SizedBox(
width: 0,
height: 0,
),),)

只需将 buildCounter 设置为 null。
它是一个回调函数,生成一个定制的[ InputDecorator.counter ]小部件

TextField(
maxLength: (some length),
buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}) => null,
);

您可以在 TextField 中使用输入格式化程序设置输入限制,如果您只是想隐藏计数器来设置输入限制,那么这是最好的方法。

import 'package:flutter/services.dart';


inputFormatters:[
LengthLimitingTextInputFormatter(1),
]

或者您可以自定义装饰使计数器 = 容器() :

 decoration: InputDecoration(
hintText: "Email",
counter: Container(),
),

如果您更喜欢自定义 buildCounter,这里是如何正确做到这一点(您也可以自定义字体、颜色等)。当文本字段失去焦点时,计数器限制将消失。或者你可以

        TextField(
controller: _clienteTextEditingController,
maxLength: 50,
buildCounter: (BuildContext context,
{int currentLength, int maxLength, bool isFocused}) {
return isFocused
? Text(
'The Input Limits are: $currentLength/$maxLength ',
style: new TextStyle(
fontSize: 10.0,
),
semanticsLabel: 'Input constraints',
)
: null;
},
),

您可以使用 InputDecoratoin 来隐藏字母计数器。

TextField(
keyboardType: TextInputType.number,
maxLength: 10,
decoration: InputDecoration(
**counterText:""**)
)

如果你在2020年还在寻找答案,这里有:

decoration: InputDecoration(
counter: Spacer(),
labelText: "National ID #",
border: InputBorder.none,
hintText: 'e.g 01-1234567A12',
hintStyle: TextStyle(color: Colors.grey)),

在文本字段,使用 Spacer()作为计数器... 希望这有所帮助,我不知道它是否打破了其他任何东西,但我的工作正常。

这就解决了我的问题!

TextField(
decoration: InputDecoration(
labelText: "Table Number",
counterText: ""
)

正如@user10481267提到的,最好的答案是使用 buildCounter属性。这提供了极大的灵活性,您甚至可以动态地决定是否显示计数器。

我用 JSON 构建了一个具有所需属性的动态表单:

TextFormField(
buildCounter: (BuildContext context,
{
int currentLength,
int maxLength,
bool isFocused}) {
if (isFocused)
return formFields[index]["max"] == null
? null
: Text(
'$currentLength / $maxLength',
semanticsLabel: 'character count',
);
else
return null;
},
maxLength: formFields[index]["max"] ?? 100,
decoration: new InputDecoration(
labelText: formFields[index]["hint"] ?? "",
fillColor: Colors.green,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(15.0),
borderSide: new BorderSide(),
),
)
)

您可以按照以下代码操作。

 TextField(
controller: myController,
maxLength: 3,
buildCounter: (BuildContext context, {int currentLength, int maxLength, bool isFocused}) =>null
)

不是很漂亮,但是可以通过移除柜台来实现:

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

对于无效安全使用:

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

< strong > CounterText: “”,添加到 InputDecoration

Image example of counterText

TextField(
decoration: InputDecoration(
counterText: "",
),
maxLength: 10,
),
    Container(
height: 48,
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
border: Border.all(
color: CustomColors.kToDark,
),
color: CustomColors.White,
borderRadius: BorderRadius.all(Radius.circular(8))),
child: TextFormField(
textAlign: TextAlign.left,
cursorColor: CustomColors.kToDark,
maxLength: 30,
controller: _titleController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
counterText: "",
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.all(0))),
),

enter image description here

enter image description here

在 InputDecoration ()中使用 反文本:

在 InputDecoration 中为计数器小部件使用 SizedBox.队列() :

enter image description here