web-dev-qa-db-fra.com

Comment puis-je limiter la taille d'un champ de texte en flutter?

Le widget TextField ne semble pas avoir d'attribut "limit" pour limiter le nombre de caractères pouvant être saisis. Comment je peux faire en sorte que seul un certain nombre de caractères puissent être fournis en entrée dans un widget TextField. J'ai essayé de regarder la propriété de la décoration et de fixer éventuellement la limite, mais cela ne semblait pas fonctionner non plus. Existe-t-il un widget différent que je devrais utiliser?

15
Anonk

J'ai dû ajouter un extrait supplémentaire à ce que RSproute a mentionné. Le code complet est ici:

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;
        } 
    }
);
2
Anonk

la propriété maxLength est disponible dans Flutter

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

il suffit d'ajouter maxLength: 45, dans les propriétés de TextField

4
UpaJah

Vous pouvez tout contrôler sur le champ de texte avec TextEditingController. Donc, si vous deviez coupler ces informations avec un événement onChanged du TextField, vous pouvez y faire la logique que vous souhaitez. Par exemple:

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.text = text;
        }

    }
)

Je suis en mesure de contrôler le champ de texte pour rester dans les lignes directrices, car s'il le dépasse, il reviendra à ce qu'il était avant le dernier type.

3
RSproule

Utilisez la propriété inputFormatters

exemple:

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

espace de noms

import 'package:flutter/services.Dart';
1
Shyju M

vous pouvez utiliser la propriété maxLength et vous pouvez toujours masquer le texte du compteur inférieur en définissant counterText sur une chaîne vide.

new TextField(
        maxLength: 10,
        decoration: new InputDecoration(
         counterText: '',
        )
    )
0
Sami Kanafani