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) {
        setState(() {
          text = value;
        });
      },
    );
  }

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

源码地址
文档:TextField
TextFormField