Flutter - le tutoriel le plus détaillé (TextField)

Introduction à TextField

Une zone de saisie de texte avec des propriétés complexes. Vous pouvez spécifier des contrôleurs, des styles de texte, des lignes décoratives, des limites de ligne, des styles de curseur, etc. Écoutez les événements de changement de zone de saisie.

scènes à utiliser :

Zone de recherche, entrez le mot de passe du compte, etc.

Les attributs	effet
manette	écouteur de la boîte de saisie
décoration	Attributs de décoration de la zone de saisie
texteAligner	alignement du contenu
texteAlignerVertical	alignement vertical du texte
textDirection	sens du personnage
longueur maximale	Entrez la longueur maximale
curseurCouleur	couleur du curseur
hauteur du curseur	hauteur du curseur
curseurLargeur	largeur du curseur
afficherCurseur	Afficher ou non le curseur
onEditingComplete	modification terminée
onChanged	Répondre lorsque le texte change
onSubmitted	Répondre lorsque vous cliquez sur OK

Propriété InputDecorationInputDecoration property

Les attributs	effet
icône	Icône à gauche de la bordure
icôneCouleur	La couleur de l'icône de gauche
étiqueter	labelText()
labelText	contenu du texte de l'étiquette
étiquetteStyle	style de texte de l'étiquette
helperText	Contenu du texte en bas à gauche
helperStyle	style de texte en bas à gauche
helperMaxLines	lignes max de texte en bas à gauche
texte d'indication	Contenu du texte d'invite
style d'astuce	Utilisez TextStyle pour modifier le style
hintTextDirection	La direction du texte de l'invite
indiceMaxLignes	Le nombre maximal de lignes de contenu de texte d'invite
texte d'erreur	Saisir le texte de l'invite d'exception
style d'erreur	Saisir le style de texte de l'invite d'exception
errorMaxLines	Entrez le nombre maximal de lignes de texte d'invite d'exception
contentPadding	Rembourrage d'entrée
préfixeIcône	icône intérieure gauche
prefixIconConstraintsprefixIconConstraints	taille de la contrainte de l'icône intérieure gauche
préfixe	texte intérieur gauche
prefixText	texte intérieur gauche
style de préfixe	style de texte intérieur gauche
prefixIconColor	couleur de l'icône intérieure gauche
suffixeIcône	icône intérieure droite
suffixe	texte intérieur droit
suffixeTexte	texte intérieur droit
suffixeStyle	style de texte intérieur droit
suffixIconColor	couleur de l'icône intérieure droite
suffixIconConstraints	内部右侧图标约束大小
counter	右侧底部文本内容
counterText	右侧底部文本内容
counterStyle	右侧底部文本内容
enabledBorder	禁用之后显示边线
border	边线相关
enabled	是否禁用

label 属性效果图

icon 属性效果图
常用于左侧图标展示

border 属性效果图
输入框边框

hintText 属性效果图
未点击时文案提示

counter 属性效果图

helperText 属性效果图

prefixIcon 属性效果图

suffixIcon 属性效果图

整合部分属性代码块与效果图

TextField(
                controller: _controller,
                style: const TextStyle(color: Colors.blue),
                decoration: const InputDecoration(
                  label: Text("标签label"),
                  icon: Icon(Icons.favorite),
                  iconColor: Colors.black,
                  border: OutlineInputBorder(),
                  hintText: "提示文本hintText",
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                  contentPadding: EdgeInsets.all(2),
                  counter: Text("提示文本counter"),
                  helperText: "帮助文本helperText",
                  prefixIcon: Icon(Icons.arrow_left),
                  suffixIcon: Icon(Icons.arrow_right),
                  suffix: Text('suffix'),
                ),
                onEditingComplete: () {
    
    
                  print('onEditingComplete');
                },
                onChanged: (v) {
    
    
                  print('onChanged:' + v);
                },
                onSubmitted: (v) {
    
    
                  FocusScope.of(context).requestFocus(_focusNode);
                  print('onSubmitted:' + v);
                  _controller.clear();
                },
              )