Uma breve introdução à caixa de entrada do componente TextField dos componentes básicos do Flutter

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui
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

insira a descrição da imagem aqui

maxLines

Quando há muita entrada, uma linha não pode ser escrita, então o
insira a descrição da imagem aqui
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)//自动换任意行

insira a descrição da imagem aqui

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.

insira a descrição da imagem aqui

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'

insira a descrição da imagem aqui
insira a descrição da imagem aqui

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
insira a descrição da imagem aqui

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//自动句子的首字母大写

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

tipo de teclado

A propriedade keyboardType é usada para definir o tipo de teclado virtual ao inserir conteúdo;

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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

            ));
    
  }
}

Acho que você gosta

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