Une brève introduction à la zone de saisie du composant TextField des composants de base de Flutter

Le composant TextField (composant de zone de saisie) est utilisé pour saisir les noms d'utilisateur, les mots de passe, le contenu de recherche, etc. dans l'application.

  body: TextField(  ),

longueur maximale

L'attribut maxLength est utilisé pour définir la longueur maximale des caractères pouvant être saisis dans la zone de saisie, et la comparaison entre la longueur d'entrée actuelle et la longueur maximale est affichée dans le coin inférieur droit de la zone de saisie.
Par exemple, lorsque la valeur de maxLength est 8, seuls 8 chiffres peuvent être saisis au maximum, et s'il y en a plus, ils ne seront pas saisis.

  body: TextField(maxLength: 8),

Si vous souhaitez dépasser la longueur définie, vous pouvez modifier la valeur d'attribut de maxLengthEnforced, qui est activé par défaut, et il n'est pas autorisé à dépasser la valeur définie. Éteignez-le et vous pourrez y entrer avec désinvolture ;

maxLengthEnforced: false

maxLignes

Lorsqu'il y a trop d'entrées, une ligne ne peut pas être écrite, alors l'

attribut maxLines est utilisé pour définir le nombre maximum de lignes autorisées à afficher
. Vous pouvez entrer jusqu'à plusieurs caractères sur la page et pouvez automatiquement envelopper 2 lignes ou n'importe quelle ligne

 TextField(maxLength: 8,maxLengthEnforced: false,maxLines: null)//自动换任意行
 TextField(maxLength: 8,maxLengthEnforced: false,maxLines: 2)//自动换任意行

texteobscur

La propriété obscureText est utilisée pour définir s'il faut masquer le contenu d'entrée. Cette propriété est souvent utilisée dans la zone de saisie du mot de passe.

Lorsque vous utilisez la propriété obscureText, maxLines == 1, vous ne pouvez pas entrer plusieurs lignes, sinon une erreur sera signalée

Failed assertion: line 382 pos 15: '!obscureText || maxLines == 1'

activer la sélection interactive

La propriété enableInteractiveSelection permet de définir si le menu "Couper/Copier/Coller" apparaît lors d'un appui long.
Par défaut, appuyez longuement pour copier et coller

Si le copier-coller n'est pas autorisé, vous pouvez définir enableInteractiveSelection : false ; si un appui long ne répondra pas

 TextField(
          maxLength: 8,
          maxLengthEnforced: true,
          maxLines: 1,
          obscureText: true,
          enableInteractiveSelection: false),

texteMajuscules

La propriété textCapitalization est utilisée pour définir les majuscules et minuscules des caractères d'entrée TextField(textCapitalization:TextCapitalization.words);

textCapitalization: TextCapitalization.sentences//自动句子的首字母大写

textCapitalization: TextCapitalization.words,//自动每个单词首字母大写

clavierType

La propriété keyboardType est utilisée pour définir le type de clavier logiciel lors de la saisie de contenu ;

keyboardType:TextInputType.number//键盘上只有数字键

TextField(keyboardType:TextlnputType.phone);//键盘上有数字键和# * +等符号键

keyboardType:TextInputType.emailAddress//键盘上有@键

Code complet :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class denglupage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('有请甄学者登录'),
          titleTextStyle: TextStyle(color: Colors.yellow),
          backgroundColor: Colors.black87,
        ),
        body: Column(children: <Widget>[
          TextField(
            maxLength: 8,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: InputDecoration(
                icon: Icon(Icons.person),
                labelText: '用户名',
                labelStyle: TextStyle(color: Colors.black),
                helperText: '用户名只能由字母和数字组成',
                helperStyle: TextStyle(color: Colors.grey),
                errorText: '用户名格式错误',
                errorStyle: TextStyle(color: Colors.red),
                hintText: '请输入用户名',
                hintStyle: TextStyle(color: Colors.black12)),
          )
        ]

            ));
    
  }
}