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( ),
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),
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
lineas maximas
Cuando hay demasiada entrada, no se puede escribir una línea, luego
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)//自动换任意行
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.
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'
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
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//自动句子的首字母大写
textCapitalization: TextCapitalization.words,//自动每个单词首字母大写
tipo de teclado
La propiedad keyboardType se usa para establecer el tipo de teclado en pantalla al ingresar contenido;
keyboardType:TextInputType.number//键盘上只有数字键
TextField(keyboardType:TextlnputType.phone);//键盘上有数字键和# * +等符号键
keyboardType:TextInputType.emailAddress//键盘上有@键
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)),
)
]
));
}
}