flutter 中的From表单

通用方法

做过前端的都应该提交过表单,以文本输入为例flutter中提供了通用的TextField组件

TextField(
 decoration: InputDecoration(labelText: '产品名称'),
 onChanged: (String value) {
 setState(() {
 _name = value;
 });
 print(value);
 },
 );

onChanged回调一个包含String value 参数的方法,通过setState方法给属性赋值.

TextFormField

//表单状态
 GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 
@override
 Widget build(BuildContext context) {
 // TODO: implement build
 return Container(
 margin: EdgeInsets.all(10.0),
 child: Form(
 //绑定状态属性
 key: _formKey,
 child: ListView(
 children: <Widget>[
 _buildNameText(),
 _buildDescriptionText(),
 _buildPriceText(),
 Container(
 padding: EdgeInsets.all(10.0),
 child:
 RaisedButton(child: Text('添加'), onPressed: _submitValues),
 )
 ],
 )));
 }
 
Widget _buildNameText() {
 return TextFormField(
 decoration: InputDecoration(labelText: '产品名称'),
 validator: (String value) {
 //删除首尾空格
 if (value.isEmpty || value.trim().length <= 5) {
 return '名称字数必须大于5';
 }
 },
 onSaved: (String value) {
 
 text = value;
 
 },
 );
 }

flutter专门为表单提交提供了一套解决方法,主要由Form,TextFormField,组件,GlobalKey<FormState>属性,组成.onSaved回调一个参数为String value的方法,调用时机与onChanged不同,会在_formKey.currentState.save()执行时调用.TextFormField中的validator是一个验证器,同样回调一个方法,可以根据自定义条件返回错误信息.它的会在_formKey.currentState.validate();方法调用是回调.