Uma breve introdução à caixa de entrada do componente TextField dos componentes básicos do Flutter
O componente TextField (componente da caixa de entrada) é usado para inserir nomes de usuário, senhas, conteúdo de pesquisa, etc. no aplicativo.
body: TextField( ),
comprimento máximo
O atributo maxLength é usado para definir o comprimento máximo de caracteres que pode ser inserido na caixa de entrada e a comparação entre o comprimento de entrada atual e o comprimento máximo é exibida no canto inferior direito da caixa de entrada.
Por exemplo, quando o valor de maxLength é 8, apenas 8 dígitos podem ser inseridos no máximo e, se houver mais, não serão inseridos.
body: TextField(maxLength: 8),
Se você quiser exceder o comprimento definido, poderá alterar o valor do atributo de maxLengthEnforced, que está ativado por padrão, e não pode exceder o valor definido. Desligue-o e você poderá inseri-lo casualmente;
maxLengthEnforced: false
maxLines
Quando há muita entrada, uma linha não pode ser escrita, então o
atributo maxLines é usado para definir o número máximo de linhas permitidas para exibição
. Você pode inserir até vários caracteres na página e pode quebrar automaticamente 2 linhas ou qualquer linha
TextField(maxLength: 8,maxLengthEnforced: false,maxLines: null)//自动换任意行
TextField(maxLength: 8,maxLengthEnforced: false,maxLines: 2)//自动换任意行
Texto obscuro
A propriedade obscuraText é usada para definir se o conteúdo de entrada deve ser ocultado. Essa propriedade é frequentemente usada na caixa de entrada de senha.
Ao usar a propriedade obscuroText, maxLines == 1, você não pode inserir várias linhas, caso contrário, um erro será relatado
Failed assertion: line 382 pos 15: '!obscureText || maxLines == 1'
enablelinteractiveSelection
A propriedade enableInteractiveSelection é usada para definir se o menu "Recortar/Copiar/Colar" aparecerá ao pressionar longamente.
Por padrão, pressione e segure para copiar e colar
Se copiar e colar não for permitido, você pode definir enableInteractiveSelection: false; portanto, o pressionamento longo não responderá
TextField(
maxLength: 8,
maxLengthEnforced: true,
maxLines: 1,
obscureText: true,
enableInteractiveSelection: false),
maiúsculas de texto
A propriedade textCapitalization é usada para definir as letras maiúsculas e minúsculas dos caracteres de entrada TextField(textCapitalization:TextCapitalization.words);
textCapitalization: TextCapitalization.sentences//自动句子的首字母大写
textCapitalization: TextCapitalization.words,//自动每个单词首字母大写
tipo de teclado
A propriedade keyboardType é usada para definir o tipo de teclado virtual ao inserir conteúdo;
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)),
)
]
));
}
}