浅识Flutter 基本组件之TextField组件输入框

TextField组件(输入框组件)用于在应用程序中输入用户名、密码、查找内容等。

  body: TextField(  ),

在这里插入图片描述

maxLength

maxLength属性用于设置输入框中可以输入的最大字符长度，并在输入框的右下角有当前输入长度与最大长度的对比显示。
例如maxLength的值为 8时，最长只能输入8位，多了就输入不进去了

  body: TextField(maxLength: 8),

在这里插入图片描述
如果想超过设定的长度，可以更改maxLengthEnforced的属性值，默认为打开，不允许超过设定值。把它关掉就可以随便输入了；

maxLengthEnforced: false

在这里插入图片描述

maxLines

输入太多时一行写不下，这时候就要换行
在这里插入图片描述
maxLines属性用于设置允许展现的最大行数
例如。在页面上最多可以输入多个字符，并且可以自动换2行或任意行

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

在这里插入图片描述

obscureText

obscureText属性用于设置是否隐藏输入的内容，该属性常用于密码输人框。

在这里插入图片描述

使用obscureText属性时，maxLines == 1，不能输入多行，否则会报错

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

在这里插入图片描述

enablelnteractiveSelection

enableInteractiveSelection属性用于设置长按是否出现“剪切/复制/粘贴”菜单。
默认情况下，长按就可以复制粘贴
在这里插入图片描述

如果不允许复制粘贴，可以设置enableInteractiveSelection: false；这样长按就没有反应了

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

textCapitalization

textCapitalization属性用于设置输入字符的大小写TextField(textCapitalization:TextCapitalization.words);

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

在这里插入图片描述

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

在这里插入图片描述

keyboardType

keyboardType属性用于设置输入内容时软键盘的类型;

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

完整代码：

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

            ));
    
  }
}