Flutter: el tutorial más detallado (TextField)

Introducción a TextField

Un cuadro de entrada de texto con propiedades complejas. Puede especificar controladores, estilos de texto, líneas decorativas, límites de línea, estilos de cursor y más. Escuche los eventos de cambio del cuadro de entrada.

Escenas a utilizar:

Cuadro de búsqueda, ingrese la contraseña de la cuenta, etc.

Atributos	efecto
controlador	oyente del cuadro de entrada
decoración	Atributos de decoración del cuadro de entrada
texto alineado	alineación de contenido
textoAlinearVertical	alineación vertical del texto
dirección del texto	dirección del personaje
longitud máxima	Introduzca la longitud máxima
cursorColor	color del cursor
cursorHeight	altura del cursor
ancho del cursor	ancho del cursor
Mostrar Cursor	Ya sea para mostrar el cursor
onEditingComplete	edición completada
enCambiado	Responder cuando cambie el texto
enEnviado	Responder cuando haga clic en Aceptar

Propiedad InputDecoration

Atributos	efecto
icono	Icono a la izquierda del borde
iconoColor	El color del icono de la izquierda.
etiqueta	etiquetaTexto()
etiquetaTexto	etiquetar el contenido del texto
estilo de etiqueta	estilo de texto de la etiqueta
ayudanteText	Contenido de texto inferior izquierdo
estilo de ayuda	estilo de texto inferior izquierdo
helperMaxLines	Líneas máximas de texto inferior izquierdo
texto de pista	Contenido de texto rápido
estilo de pista	Usa TextStyle para modificar el estilo.
pistaTextoDirección	La dirección del texto del mensaje
sugerenciaMaxLines	El número máximo de líneas de contenido de texto de solicitud
texto de error	Ingrese el texto del mensaje de excepción
estilo de error	Estilo de texto de solicitud de excepción de entrada
errorMaxLines	Ingrese el número máximo de líneas de texto de solicitud de excepción
relleno de contenido	relleno de entrada
icono de prefijo	icono interior izquierdo
prefijoIconoRestricciones	tamaño de restricción del icono interior izquierdo
prefijo	texto interior izquierdo
prefijoTexto	texto interior izquierdo
prefijoEstilo	estilo de texto interior izquierdo
prefijoIconColor	color del icono interior izquierdo
icono de sufijo	icono interior derecho
sufijo	texto interior derecho
sufijoTexto	texto interior derecho
sufijoEstilo	estilo de texto interior derecho
sufijoIconColor	color del icono interior derecho
sufijoIconoRestricciones	内部右侧图标约束大小
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();
                },
              )