TextField输入框
TextField用于文本输入,它提供了很多属性。如下:
controller:
编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。
focusNode:
用于控制TextField是否占有当前键盘的输入焦点。
InputDecoration:
用于控制TextField的外观显示,如提示文本、背景颜色、边框等
keyboardType:
用于设置该输入框默认的键盘输入类型
text 文本输入键盘
multiline 多行文本,需和maxLines配合使用(设为null或大于1)
number 数字;会弹出数字键盘
phone 电话号码输入键盘;会弹出数字键盘并显示“* #”
datetime 日期输入键盘;Android上会显示“: -”
emailAddress 电子邮件地址;会显示“@ .”
url url输入键盘; 会显示“/ .”
textInputAction:
键盘动作按钮图标(即回车键位图标),
style:
正在编辑的文本样式。
textAlign:
输入框内编辑文本在水平方向的对齐方式。
autofocus:
是否自动获取焦点。
obscureText:
是否隐藏正在编辑的文本,如用于输入密码的场景。
maxLines:
输入框的最大行数,默认为1;如果为null,则无行数限制。
maxLength和maxLengthEnforced :
maxLength代表输入框文本的最大长度,设置后输入框右下角会显示输入的文本计数。
maxLengthEnforced决定当文本长度超过maxLength时是否继续输入,为true时会无法输入,为false时不会停止输入但框会变红。
onChange:
输入框内容改变时的回调函数;
onEditingComplete和onSubmitted:
这两个回调都是在输入框输入完成时触发,onSubmitted回调是ValueChanged类型,它接收当前输入内容做为参数,而onEditingComplete不接收参数。
inputFormatters:
用于指定输入格式
enable:
如果为false,则输入框会被禁用,
cursorWidth:
自定义输入框光标宽度。
cursorRadius:
自定义输入框圆角。
cursorColor:
自定义输入框颜色。
class StudyTextField extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("输入框TextField及表单From"),
),
body: Container(
child: Column(
//测试Row对齐方式,排除Column默认居中对齐的干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
autofocus: true,//获取焦点
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person,color: Colors.blue,),
),
keyboardType: TextInputType.phone,//输入类型限制
textAlign: TextAlign.start,//输入框内文本对齐方式
maxLines: 1,//最大行数
onChanged: (userName){
print(userName);
},
maxLength: 20,//最大字数
maxLengthEnforced: true,//超过最大字数不显示 为false则超过的字数继续显示并报红
),
TextField(
decoration: InputDecoration(
labelText: "密码",
hintText: "登录密码",
prefixIcon: Icon(Icons.lock,color: Colors.blue,),
),
obscureText: true,//隐藏输入的内容
),
],
),
),
);
}
}
效果:
表单Form
Form继承自StatefulWidget对象,它对应的状态类为FormState
autovalidate:
是否自动校验输入内容;当为true时,每一个子FormField内容发生变化时都会自动校验合法性,并直接显示错误信息。否则,需要通过调用FormState.validate()来手动校验。
onWillPop:
决定Form所在的路由是否可以直接返回,false 则不会返回, true则返回
onChanged:
Form的任意一个子FormField内容发生变化时会触发此回调
FormField
Form的子孙元素必须是FormField类型,FormField是一个抽象类,定义几个属性,FormState内部通过它们来完成操作
const FormField({
FormFieldSetter<T> onSaved, //保存回调
FormFieldValidator<T> validator, //验证回调
T initialValue, //初始值
bool autovalidate = false, //是否自动校验。
})
TextFormField继承自FormField类,也是TextField包装类。
FormState
FormState为Form的State类,可以通过Form.of()或GlobalKey获得。
可以通过它来对Form的子孙FormField进行统一操作。
FormState.validate():调用此方法后,会调用Form子孙FormField的validate回调,如果有一个校验失败,则返回false,所有校验失败项都会返回用户返回的错误提示。
FormState.save():调用此方法后,会调用Form子孙FormField的save回调,用于保存表单内容
FormState.reset():调用此方法后,会将子孙FormField的内容清空。
登录示例
class StudyForm extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return StudyFormState();
}
}
class StudyFormState extends State<StudyForm>{
GlobalKey formKey = GlobalKey<FormState>();
TextEditingController nameTextEditingController = TextEditingController();
TextEditingController pwdTextEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("输入框TextField及表单From"),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 16,horizontal: 24),
child: Form(
key: formKey,//设置globalKey
autovalidate: true,//开启自动校验
child: Column(
children: <Widget>[
TextFormField(
autofocus: true,//获取焦点
controller: nameTextEditingController,
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
//校验用户名
validator: (name){
return name!.trim().length > 0 ? null:"用户名不能为空";
},
),
TextFormField(
controller: pwdTextEditingController,
decoration: InputDecoration(
labelText: "密码",
hintText: "输入密码",
prefixIcon: Icon(Icons.lock),
),
obscureText: true,
//校验用户名
validator: (pwd){
return pwd!.trim().length > 5 ? null:"密码不能少于6位";
},
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
children: <Widget>[
Expanded(
child: Builder(
builder: (context){
return RaisedButton(
child: Text("登录"),
padding: const EdgeInsets.all(15),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
onPressed: () {
// 调用validate()方法校验用户名密码是否合法,校验
// 通过后再提交数据。
if(Form.of(context)!.validate()){
//校验通过则提交数据
print("校验通过,可以提交。");
}
},
);
},
),
),
],
),
),
],
),
),
),
);
}
}
效果