如何在Flutter中隐藏TextField底部的字母计数器

Question

如何在Flutter中隐藏TextField底部的字母计数器

dartflutter

182

我遇到了一个小问题。如您所见，在Flutter中我将TextField的maxLength设置为1，但我无法隐藏文本计数器的底部标签。

- Sunil

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JIJO J · Answer 1

在Flutter中，如果您不需要某个部件，只需放置一个空容器即可！

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

- aytunch · Answer 2

8

针对空安全性，请使用以下内容:

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

- aytunch

1

在我看来，这是完全移除计数器的最佳答案，因为将InputDecoration中的“counter”参数设置为OffStage()或其他零空间小部件可能会隐藏计数器，但我注意到仍然存在4像素高度填充 - 因此，这个“buildCounter”方法完全消除了它。 - Pip

1

我同意。这个答案是最灵活的，而且考虑到你现在拥有的额外控制量，实现起来也不会太困难。 - enchance

请将此标记为已接受答案。这个解决方案是标准的。 - undefined

- Cassio Seffrin · Answer 3

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

import 'package:flutter/services.dart';

inputFormatters:[
      LengthLimitingTextInputFormatter(1),
]

或者您可以自定义修饰，创建一个counter = Container()：

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

- Puneet kaushal · Answer 4

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

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

- Diksha Pruthi · Answer 5

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

在InputDecoration()中使用counterText: ""

- Maybelle Pacate · Answer 6

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

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

- Salim Murshed · Answer 7

你可以按照以下代码进行操作。

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

- Ced · Answer 8

不太好看但是可以通过移除计数器来实现：

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

- JamalJamaica · Answer 9

如果你仍在寻找2020年的答案，这里是：

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

在TextField中，使用Spacer()作为计数器...希望这可以帮到你，我不知道它是否会破坏其他东西，但我的工作正常。

- Brian Y. · Answer 10

在InputDecoration中，对于计数器小部件，请使用SizedBox.shrink()：