Flutter文本框TextField

参数详解
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

最新文章

热门文章