Una breve introducción al cuadro de entrada del componente TextField de los componentes básicos de Flutter

Una breve introducción al cuadro de entrada del componente TextField de los componentes básicos de Flutter

El componente TextField (componente de cuadro de entrada) se utiliza para ingresar nombres de usuario, contraseñas, contenido de búsqueda, etc. en la aplicación.

  body: TextField(  ),

inserte la descripción de la imagen aquí

longitud máxima

El atributo maxLength se usa para establecer la longitud máxima de caracteres que se puede ingresar en el cuadro de entrada, y la comparación entre la longitud de entrada actual y la longitud máxima se muestra en la esquina inferior derecha del cuadro de entrada.
Por ejemplo, cuando el valor de maxLength es 8, solo se pueden ingresar 8 dígitos como máximo, y si hay más, no se ingresarán.

  body: TextField(maxLength: 8),

inserte la descripción de la imagen aquí
Si desea exceder la longitud establecida, puede cambiar el valor del atributo de maxLengthEnforced, que está activado de forma predeterminada y no se permite exceder el valor establecido. Apágalo y podrás entrar en él casualmente;

maxLengthEnforced: false

inserte la descripción de la imagen aquí

lineas maximas

Cuando hay demasiada entrada, no se puede escribir una línea, luego
inserte la descripción de la imagen aquí
se usa el atributo maxLines para establecer el número máximo de líneas que se pueden mostrar
. Puede ingresar hasta varios caracteres en la página y puede ajustar automáticamente 2 líneas o cualquier línea

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

inserte la descripción de la imagen aquí

Texto oscuro

La propiedad darkText se usa para establecer si se oculta el contenido de entrada. Esta propiedad se usa a menudo en el cuadro de entrada de contraseña.

inserte la descripción de la imagen aquí

Al usar la propiedad darkText, maxLines == 1, no puede ingresar varias líneas, de lo contrario, se informará un error

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

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

enablelinteractiveSelection

La propiedad enableInteractiveSelection se usa para establecer si el menú "Cortar/Copiar/Pegar" aparece al presionar prolongadamente.
De manera predeterminada, presione prolongadamente para copiar y pegar
inserte la descripción de la imagen aquí

Si no se permite copiar y pegar, puede configurar enableInteractiveSelection: falso; por lo tanto, la presión prolongada no responderá

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

textCapitalization

La propiedad textCapitalization se usa para establecer las mayúsculas y minúsculas de los caracteres de entrada TextField(textCapitalization:TextCapitalization.words);

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

inserte la descripción de la imagen aquí

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

inserte la descripción de la imagen aquí

tipo de teclado

La propiedad keyboardType se usa para establecer el tipo de teclado en pantalla al ingresar contenido;

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

inserte la descripción de la imagen aquí

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

inserte la descripción de la imagen aquí

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

inserte la descripción de la imagen aquí

Código completo:

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

            ));
    
  }
}

Supongo que te gusta

Origin blog.csdn.net/qq_43336158/article/details/123746162
Recomendado
Clasificación