参数详解
TextField同时也使用Text 的部分属性:

属性 作用
controller 控制器,如同 Android View id
decoration 输入器装饰
keyboardType
输入的类型

- TextInputType.text(普通完整键盘)

- TextInputType.number(数字键盘)

- TextInputType.emailAddress(带有“@”的普通键盘)

- TextInputType.datetime(带有“/”和“:”的数字键盘)

- TextInputType.multiline(带有选项以启用有符号和十进制模式的数字键盘)

- TextInputType.url

obscureText 是否隐藏输入(密码设置为true)
onChanged 监听  文字改变触发
onSubmitted 监听  键盘提交
cursorWidth 光标显示宽度
cursorRadius 光标显示圆角
cursorColor 光标显示颜色
autofocus 是否自动聚焦,默认是 false。
textCapitalization
用户输入的类型

- TextCapitalization.none 无
- TextCapitalization.sentences 首句大写
- TextCapitalization.characters 所有字符大写
- TextCapitalization.word 每个单词首字母大写

enabled 是否禁用。如果是 false 不聚焦
inputFormatters 官方提供了三种校验方法,分别是
WhitelistingTextInputFormatter(RegExp("[a-z]")) 白名单校验,也就是只允许输入符合规则的字符
BlacklistingTextInputFormatter(RegExp("[a-z]")) 黑名单校验,除了规定的字符其他的都可以输入
LengthLimitingTextInputFormatter(number) 长度限制,跟 maxLength 作用类似

代码示例
body: new ListView(
children: <Widget>[
TextField(
decoration: new InputDecoration(hintText: "This is a hint",helperText: '官方表单Demo'),
),
TextField(
keyboardType: TextInputType.number,
decoration: new InputDecoration(
labelText: '数字优先的文本框',
),
),
TextField(
decoration: new InputDecoration(
icon: Icon(Icons.phone),//添加一个图标
labelText: '请输入你的用户名',
helperText: '带图标和Label的文本输入框',
),
),
TextField(
decoration: new InputDecoration(
icon: Icon(Icons.lock),//添加一个图标
labelText: '请输入密码',
helperText: '带图标和Label的密码输入框',
),
obscureText: true, //是否隐藏输入
),

//--------------------------------模拟登陆---------------------------
Text('模拟登陆',style: TextStyle(fontSize: 20,height: 3,fontWeight: FontWeight.bold),textAlign: TextAlign.center,),
TextField(
controller: userController, //控制器,控制TextField文字 同 Android View id
decoration: new InputDecoration(
icon: Icon(Icons.phone),//添加一个图标
labelText: '请输入你的用户名',
),
autofocus: false,
),
TextField(
controller: passController,
decoration: new InputDecoration(
icon: Icon(Icons.lock),//添加一个图标
labelText: '请输入密码',
),
obscureText: true, //
),
new Container(
width: 340.0,
padding: new EdgeInsets.all(20),
child: new Card(
color: Colors.blue,
elevation: 16.0,
child: new FlatButton(
child: new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
'登 录',
style: new TextStyle(
color: Colors.white, fontSize: 16.0),
),
),
onPressed: _login
)
)
),

],
)

//登陆校验
void _login() {
print({'用户名': userController.text, '密码': passController.text});
if(userController.text.isEmpty){
myDialog('请输入用户名!');
}else if(passController.text.isEmpty){
myDialog('请输入密码!');
}else if(userController.text == 'mzw' && passController.text == '123'){
myDialog('登陆成功!');
userController.clear();
passController.clear();
}else {
myDialog('用户密码错误!');
}
}

//对话框
void myDialog(String msg){
print(myContext);
showDialog(
context: myContext,
barrierDismissible: false,
child: new AlertDialog(
title: new Text(
'温馨提示',
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text(msg),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.pop(myContext);
},
child: new Text('确定')),
],
),
);
}

TextField(
decoration: new InputDecoration(
labelText: '带边框的文本输入眶',
border: OutlineInputBorder(http://www.amjmh.com),
),
),
TextField(
maxLines: 10,
minLines: 5,
decoration: new InputDecoration(
labelText: '多行文本输入框',
border: OutlineInputBorder(),
),
),

效果图
             
————————————————

Flutter文本框TextField的更多相关文章

  1. EXT学习之——Extjs 文本框 TextField 添加点击(onclick)事件方法

    { xtype:'textfield', listeners: { render: function(p) { // Append the Panel to the click handler's a ...

  2. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  3. Flutter——TextField组件(文本框组件)

    TextField组件的常用属性: 属性 描述 maxLines 设置此参数可以把文本框改为多行文本框 onChanged 文本框改变的时候触发的事件 decoration hintText 类似 h ...

  4. 24Flutter中常见的表单有TextField单行文本框,TextField多行文本框、CheckBox、Radio、Switch

    一.Flutter常用表单介绍: CheckboxListTile.RadioListTile.SwitchListTile.Slide. 二.TextField:表单常见属性: maxLines:设 ...

  5. TextField文本框

    1)失去第一响应者状态方法(即关闭键盘) 要先将视图view的底层类设置为UIControl类 再设置view的touch down事件,在事件中写入以下方法 [self.textField resi ...

  6. 无废话ExtJs 入门教程五[文本框:TextField]

    无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...

  7. Flutter控制某个TextField获取焦点及失去焦点

    在项目中有时需要点击某个地方的时候让一个文本框获取焦点以弹起键盘~~比如前端经常使用的input.focus(),但是在flutter中没有.focus()这个方法~~不过我们可以通过FocusSco ...

  8. UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等

    (1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...

  9. 由 s:hidden 引起的文本框内容不能传到 struts的Action中

    <s:form id="startForm" name ="startForm" action="/hall/hall_startList.do ...

随机推荐

  1. JS基础_代码块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 深入理解hadoop数据倾斜

    深入理解hadoop之数据倾斜 1.什么是数据倾斜 我们在用map /reduce程序执行时,有时候会发现reduce节点大部分执行完毕,但是有一个或者几个reduce节点运行很慢,导致整个程序的处理 ...

  3. 判断一个数是否为回文数(js)

    //判断是否为回文数:若n=1234321,则称n为一回文数 let readline = require("readline-sync"); let newNum = 0; co ...

  4. Python中GUI库PyQt5的安装和配置

    在使用Tkinter开发GUI程序时,发现相关文档比较少,开发起来太累.经过综合比较,决定使用PyQt这个库.下面是简单的安装步骤. 1.安装 PyQt5 : pip install PyQt5 -i ...

  5. U盘被识别但不显示盘符怎么样才能解决?

    很多朋友在将U盘插入电脑后,会发现右下角的任务栏虽然出现了U盘的图标,但是在我的电脑中并没有显示出U盘的盘符,也就无法继续对U盘进行操作.遇到这种情况该怎么办呢?下面好系统U盘启动就告诉大家相应的解决 ...

  6. deep_learning_Activate_method

    常见的激活函数有sigmoid.tanh和relu三种非线性函数,其数学表达式分别为: sigmoid: y = 1/(1 + e-x) tanh: y = (ex - e-x)/(ex + e-x) ...

  7. 分析bug是前端还是后端的

    如何分析一个bug是前端还是后端的? 平常提bug的时候,前端开发和后端开发总是扯皮,不承认是对方的bug 这种情况很容易判断,先抓包看请求报文,对着接口文档,看请求报文有没问题,有问题就是前端发的数 ...

  8. CSS字体中英文名称对照表

    在CSS文件中,我们常看到有些字体名称变成了乱码,这是由于编写者将中文字体的名字直接写成了中文,并且再上传或者拷贝复制的时候无意间变成了乱码. 为了避免这种状况出现,在CSS文件中使用中文字体时,最好 ...

  9. hive传递参数与调用

    在运行hive命令时传入参数,使用-hivevar 和 -hiveconf 两种参数选项,来给此次的执行脚本传入参数 -hivevar : 传参数 ,专门提供给用户自定义变量. -hiveconf : ...

  10. Acwing-252-树(点分治)

    链接: https://www.acwing.com/problem/content/254/ 题意: 给定一个有N个点(编号0,1,-,N-1)的树,每条边都有一个权值(不超过1000). 树上两个 ...