A brief introduction to the TextField component input box of the basic components of Flutter

The TextField component (input box component) is used to enter user names, passwords, search content, etc. in the application.

  body: TextField(  ),

insert image description here

maxLength

The maxLength attribute is used to set the maximum character length that can be entered in the input box, and the comparison between the current input length and the maximum length is displayed in the lower right corner of the input box.
For example, when the value of maxLength is 8, only 8 digits can be entered at the longest, and if there is more, it will not be entered.

  body: TextField(maxLength: 8),

insert image description here
If you want to exceed the set length, you can change the attribute value of maxLengthEnforced, which is turned on by default, and it is not allowed to exceed the set value. Turn it off and you can enter it casually;

maxLengthEnforced: false

insert image description here

maxLines

When there is too much input, one line cannot be written, then the
insert image description here
maxLines attribute is used to set the maximum number of lines allowed to display
. You can enter up to multiple characters on the page, and can automatically wrap 2 lines or any line

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

insert image description here

obscureText

The obscureText property is used to set whether to hide the input content. This property is often used in the password input box.

insert image description here

When using the obscureText property, maxLines == 1, you cannot enter multiple lines, otherwise an error will be reported

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

insert image description here

enablelnteractiveSelection

The enableInteractiveSelection property is used to set whether the "Cut/Copy/Paste" menu appears on long press.
By default, long press to copy and paste
insert image description here

If copying and pasting is not allowed, you can set enableInteractiveSelection: false; so long press will not respond

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

textCapitalization

The textCapitalization property is used to set the upper and lower case of the input characters TextField(textCapitalization:TextCapitalization.words);

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

insert image description here

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

insert image description here

keyboardType

The keyboardType property is used to set the type of soft keyboard when inputting content;

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

insert image description here

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

insert image description here

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

insert image description here

Full code:

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

            ));
    
  }
}