美妆网站怎么做品牌设计包括哪些方面

我们在上一章回中介绍了Form Widget相关的内容，本章回中将介绍Form系列组件的验证与提交功能.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在这里说的的验证功能与提交功能是指对Form组件中的内容进行验证和提交，它不像TextField一样对单个组件进行验证同，而是对Form组件中的所有组件进行统
一的验证与提交。这也是我们使用Form组件最大的优点。

2 使用方法

整体的思路：先在Form的子组件中实现验证方法和数据保存方法，也就是给子组件(通常是TextFormField组件)的validator和onSaved属性赋值；然后统一进行
验证数据的合法性并且对数据进行保存，这个操作由FormState对象方来完成。
FormState是Form的State类，主要用来对Form中的所有FormField进行统一操作，比如保存数据的操作。我们可以通过Form.of()或者GlobalKey获取该类型
的对象。该类型提供了相关的方法对数据进行统一操作，下面是这些方法的详细内容：

• validate()方法：主要用来验证数据的合法性；
• save()方法：主要用来保存数据；
• reset()方法：主要用来重置数据；

3 代码与效果

3.1 示例代码

final formKey = GlobalKey<FormState>();
AutovalidateMode _autoValidate = AutovalidateMode.disabled;
String? _name = "Default Name";
String? _pwd = "Default Pwd";//验证和提交和方法，虽然只验证和提交一次，但是它会回调Form中所有子组件的验证和提交方法。
//相当于一次对所有的输入内容进行了验证和提交。
void loginWithForm() {//合法性验证成功则保存数据,否则打开自动验证功能，这样在用户输入后会自动关闭错误提示，这种体验比较好if (formKey.currentState!.validate()) {// _autoValidate = AutovalidateMode.disabled;//它会回调TextFormFiled中的onSave方法formKey.currentState?.save();} else {setState(() {_autoValidate = AutovalidateMode.always;});}//它会回调validator对应的回方法，成功返回true,错误返回错误信息（在验证方法中），显示在helperText位置// formKey.currentState?.validate();debugPrint("login clicked");
}

上面的代码中我们主要演示了如何获取FormState对象，并且通过该对象来调用数据验证和保存方法。此外，该对象需要赋值给Form组件的key属性才有效果。详细内容
可以参考上一章回中的示例代码，Form子组件中的数据验证和保存方法也在上一章回的示例代码中。FormState对象不会自动去验证和保存数据，我们把该对象的操作封
装成一个方法，也就是代码中的loginWithForm()方法，然后把该方法赋值给Button的onPress属性，最后把Button组件和Form组件放到同一页面上，点击Button
时就会调用loginWithForm()方法去验证和保存Form组件中的数据，下面是Button的示例代码：

Container(width: double.infinity,height: 56.0,child: ElevatedButton(onPressed: () => loginWithForm(),child: Text("Login"),),
),

3.2 运行效果

下面是程序的运行效果图，请大家参考：

4. 经验分享

下面分享一些我在验证数据合法性方法的经验:在Form组件的子组件TextFormField中不要打开自动验证功能(默认关闭），当验证错误时再打开自动验证功能，示例代
码可以参考上一小节中loginWithForm()方法内SetState相关的代码。这样做的好处有以下几点：- 只有主动点击按钮时才会验证数据的合法性； - 如果打开自动验
证会显示helpText中的内容，会让人以为是错误了； - 在验证出错后再开启自动验证，输入正确后就会让helpText中的错误内容消失，因为Form中包含多个子组件，
一个子组件的错误提示内容消失后不会影响其它子组件；下面是验证合法性的示例代码，请大家参考：

//返回有内容时会显示在help位置，而且边框颜色变成红色，返回为Null时不会显示出来
String? _validateName(String? n) {if (n!.isEmpty)return "name is empty";elsereturn null;
}

我们把验证数据合法性的代码封装成了一个方法，把该方法赋值给TextFormField组件的validator属性后就可以使用了。上面的代码只验证了输入内容是否为空，大
家可以依据项目的需求来做其它的验证，比如输入内容是否为邮件格式等。注意：只有验证不合法时才返回文字内容，验证合法时返回空对象，因为这里返回的文字内容会
显示在TextFormField组件的helpText位置。关于经验分享中的内容，我建议大家自己动手实践，因为这部分内容是动态的，需要实际操作才能体会到它的好处，
此外，大家可以调整错误提示文字的颜色，以及TextFormField组件获取焦点后的颜色，我把这样内容添加到了代码的注释中，大家可以参考注释进行调整。
看官们，关于"Form系列组件的验证与提交功能"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!