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

浅识Flutter 基本组件之TextField组件 输入框,第1张

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

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

            ));
    
  }
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/993713.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存