Une brève compréhension de la propriété de décoration de la zone de saisie du composant TextField des composants de base de Flutter

décoration

La propriété decoration est utilisée pour définir la décoration de la zone de saisie. La valeur de la propriété est de type InputDecoration. Contrôle l'apparence de la zone de saisie et le style du message d'invite.

InputDecoration contrôle les propriétés communes du style d'information d'invite de la zone de saisie

Comme suit :
(1) icône : définissez l'icône à afficher sur le côté gauche de la zone de saisie.
(2) labelText : définissez les informations de description de la zone de saisie. Lorsque la zone de saisie obtient le focus, elle flottera vers le haut par défaut.
(3) helperText : définissez les informations auxiliaires de la zone de saisie, situées sous la zone de saisie.
(4) errorText : définissez le message d'erreur lorsque le contenu de la zone de saisie est saisi de manière incorrecte.
(5) hintText : définissez les informations d'invite dans la zone de saisie. Cet attribut peut être utilisé conjointement avec l'attribut hintStyle. L'attribut intStyle est utilisé pour définir le style de texte des informations d'invite dans la zone de saisie, et sa valeur d'attribut est de type TextStyle.

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

(6) prefixlcon : définissez l'icône avant dans la zone de saisie. La méthode d'utilisation est la même que pour l'attribut icon, mais l'icône est située sur le côté droit de l'icône définie par l'attribut icon.
(7) prefixText : définit le prétexte dans la zone de saisie. Cette propriété peut être utilisée conjointement avec la propriété prefixStyle. La propriété prefixStyle est utilisée pour définir le style de prétexte dans la zone de saisie. Sa valeur de propriété est de type Style de texte.
(8) suffixlcon : définissez l'icône arrière dans la zone de saisie. La méthode d'utilisation est la même que pour l'attribut icon, mais l'icône est située sur le côté droit de la zone de saisie.
(9) suffixText : définit le texte du message dans la zone de saisie. Cette propriété peut être utilisée conjointement avec la propriété suffixStyle. La propriété prefixStyle est utilisée pour définir le style de texte derrière la zone de saisie. Sa valeur de propriété est de type TextStyle.
(10) counterText : définit le texte affiché en bas à droite de la zone de saisie. Il est souvent utilisé pour afficher le nombre de caractères saisis. Cette propriété peut être utilisée conjointement avec la propriété counterStyle. La propriété counterStyle est utilisée pour définir le style de texte en bas à droite de la zone de saisie Sa valeur de propriété It est de type TextStyle.
(11) counter : Définit le widget Widget en bas à droite de la zone de saisie, mais ne peut pas être utilisé avec counterText en même temps.
(12) filled : Définit la couleur d'arrière-plan de la zone de saisie remplie, si sa valeur est true, utilisez l'attribut fllColor pour spécifier La couleur est utilisée comme couleur d'arrière-plan de la zone de saisie. La propriété fllColor est utilisée pour définir la couleur d'arrière-plan de la zone de saisie et son type de valeur de propriété est le type de couleur.

 TextField(
            maxLength: 13,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: InputDecoration(
              icon: Icon(Icons.ad_units_rounded,color: Colors.grey  ,),
              labelText: '手机号',
              labelStyle: TextStyle(color: Colors.black),
              hintText: '请输入用户手机号码',
              hintStyle: TextStyle(color: Colors.black12),
              prefixText: '086',
              prefixStyle: TextStyle(color: Colors.black),
              prefixIcon: Icon(Icons.phone,color: Colors.blue,),
              suffixText: '中国',
              suffixIcon: Icon(Icons.flag,color: Colors.grey),
              counterText: '输入13位手机号码',
              counterStyle: TextStyle(color: Colors.grey),
              // counter: Text('输入13位手机号码')
              filled: true,
              fillColor: Colors.orangeAccent


            ),
          ),

InputDecoration contrôle l'entrée

Propriétés communes du style de bordure extérieure de la zone.
Le style par défaut de la bordure extérieure est un gris

(1) bordure : définissez la ligne de bordure de la zone de saisie. Il y a une bordure par défaut. Lorsque la zone de saisie n'a pas le focus, la bordure extérieure est grise ; lorsque la zone de saisie a le focus, la bordure extérieure est la couleur du thème.
La valeur de cette propriété peut être :
border:InputBorder.none, définit la zone de saisie sans bordure ;

border : OutlineInputBorder(), définit le style de bordure de la zone de saisie ;

définit le style de la bordure extérieure :

    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(30))//边角为30的方框
    )

UnderlineInputBorder, définit le style de la bordure inférieure de la zone de saisie,

(2) enabledBorder : définit la couleur de la bordure, le radian d'angle, etc. de la zone de saisie dans l'état disponible. La valeur de cette propriété est la même que celle de la propriété border .

enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
          borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
      )

(3) focusBorder : définissez
la couleur de la ligne de bordure, le radian d'angle, etc. de la zone de saisie lorsque le focus est obtenu. La méthode d'utilisation est la même que celle de la propriété enabledBorder.

focusedBorder:OutlineInputBorder()

Avant

de cliquer Après de cliquer sur Entrée

Code complet :

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

class denglupage extends StatelessWidget {
    
    
  InputDecoration inputDecoration = InputDecoration(
      icon: Icon(
        Icons.ad_units_rounded,
        color: Colors.grey,
      ),
      labelText: '手机号',
      labelStyle: TextStyle(color: Colors.black),
      hintText: '请输入用户手机号码',
      hintStyle: TextStyle(color: Colors.black12),
      prefixText: '086',
      prefixStyle: TextStyle(color: Colors.black),
      prefixIcon: Icon(
        Icons.phone,
        color: Colors.blue,
      ),
      suffixText: '中国',
      suffixIcon: Icon(Icons.flag, color: Colors.grey),
      counterText: '输入13位手机号码',
      counterStyle: TextStyle(color: Colors.grey),
      // counter: Text('输入13位手机号码')
      filled: true, //设置填充输人框的背景色，
      // fillColor: Colors.orangeAccent
      // border: UnderlineInputBorder( )
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(60)), //边角为30的方框
          borderSide: BorderSide(color: Colors.red,width:10)//设置边框线的颜色和粗细
      ),
      focusedBorder:OutlineInputBorder()
  );
  @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)),
          ),
          TextField(
            maxLength: 13,
            maxLengthEnforced: false,
            maxLines: 1,
            // obscureText: true,
            enableInteractiveSelection: false,
            textCapitalization: TextCapitalization.words,
            // keyboardType:TextInputType.emailAddress// 设置输入内容时软键盘的类型
            decoration: inputDecoration,
          ),
        ]

            // TextField delegate method
            ));
    // theme:ThemeData(primaryColor: Colors.black38)));
  }
}