class _TextFieldDemo extends State<TextFieldDemo> {
//文本框编辑控制
TextEditingController userNameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
controller: userNameController,
maxLength: 11,
maxLines: 1,
//控制首字符大小写
//TextCapitalization.words 每个单词的首字母大写
//TextCapitalization.sentences 首字母大写
//TextCapitalization.characters 所有字母大写
//TextCapitalization.words 每个单词的首字母大写
//TextCapitalization.words 每个单词的首字母大写
textCapitalization: TextCapitalization.words,
//键盘类型
//TextInputType.number 数字类型的键盘
//TextInputType.emailAddress 邮箱类型
//TextInputType.datetime 时间类型
//TextInputType.phone 电话类型
//TextInputType.text 文本类型
//TextInputType.url 地址类型
keyboardType: TextInputType.url,
decoration: InputDecoration(
//外边框,如果不写参数默认会加上一个包裹的外边框
border: OutlineInputBorder(),
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.phone),
//前置图标
prefixIcon: Icon(Icons.print),
//后置图标
suffixIcon: Icon(Icons.person),
//placeholder
labelText: '用户名',
labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
//文本框下的提示
helperText: '用户名为邮箱',
helperStyle: TextStyle(fontSize: 12.0)),
// //光标颜色
// cursorColor: Colors.red,
// //光标弧度
// cursorRadius: Radius.circular(16.0),
// //光标宽度
// cursorWidth: 3.0,
),
//密码框
TextField(
controller: passwordController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
icon: Icon(Icons.lock),
labelText: '请输入密码'),
//显示为密码效果
obscureText: true,
//键盘回车按钮样式
textInputAction: TextInputAction.go,
),
RaisedButton(
onPressed: () {
loginCheck();
},
child: Text('登录'),
)
],
);
}
//登陆检测
loginCheck() {
if (userNameController.text.length != 11) {
print('请输入正确的手机号');
return;
}
if (passwordController.text.length != 6) {
print('请输入六位数的密码');
return;
}
print('登陆成功!');
}
}
Flutter笔记61:TextField文本输入框组件
TextField文本输入框组件就是html里面的input输入框,可以用来获取用户的输入内容。这里做个简单的登录效果:
