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输入框,可以用来获取用户的输入内容。这里做个简单的登录效果: