第三百零八回

本文主要是介绍第三百零八回，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们在上一章回中介绍了"如何实现密码输入框"相关的内容，本章回中将介绍如何在在输入框中提示错误.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回介绍的内容还与输入框有关，输入框仍然使用TextField组件实现。我们主要介绍如何在输入框中提示错误。具体的现象是输入框下方显示错误文字信息，
同时输入框显示红色边框。这相当于使用文字信息和颜色来发出错误提示。本章回中将介绍如何实现这些错误提示。

2. 实现方法

输入框中的错误信息都是通过TextField组件的属性实现的，我们在接下来的小节中分别介绍文字信息和红色方框的实现方法。

2.1 文字信息

文字信息主要通过InputDecoration组件的errorText属性实现，同时我们需要把InputDecoration组件赋值给TextField组件的decoration属性，这样才能在
输入框下方显示文字信息。errorText属性比较特殊，当它的值为null时不会显示任何文字，当它的值不为null时就会显示文字信息，文字信息位于输入框下方，而且
文字的颜色是红色。开发人员只需要给errorText属性赋值就可以，其它的事情不需要去关注。

2.2 红色边框

红色边框主要通过InputDecoration组件的errorBorder属性实现，同时我们需要把InputDecoration组件赋值给TextField组件的decoration属性，这样才
能在输入框周围显示红色边框。errorBorder属性比较特殊，当errorText属性的值为null时不会显示红色边框，当errorText属性的值不为null时就会显示红色边
框，边框环绕在整个输入框周围。开发人员只需要给errorText属性赋值就可以，其它的事情不需要去关注。

3. 示例代码

TextField(obscureText: !isPasswordVisible,keyboardType: TextInputType.text,decoration: InputDecoration(///这两个一起使用才有填充颜色filled: true,fillColor: Colors.grey[200],///属性值不为空时(!= null)显示errorText,errorText: isPwdEmpty? "password is empty": null,///用来去掉输入框下面的横线border: InputBorder.none,///实现显示和隐藏密码功能suffixIcon: IconButton(icon:isPasswordVisible ? const Icon(Icons.visibility) : const Icon(Icons.visibility_off),onPressed: () {setState(() {isPasswordVisible = !isPasswordVisible;});},),///失去焦点并且errorText的值不为null时就显示errorBorder: OutlineInputBorder(borderSide: const BorderSide(color:Colors.red,width: 1),borderRadius: BorderRadius.circular(16),),),///这里的值配合配合border一起实现红色边框错误提示功能onChanged: (value) {setState(() {if(value == "" || value.isEmpty) {pwdValue = "";isPwdEmpty = true;}else {pwdValue = value;isPwdEmpty = false;}});},
),

上面的示例代码演示了如何在输入框中提示错误，错误包含文本信息和红色方框，它们都通过isPwdEmpty这个bool类型的变量来控制，我们会在onChanged属性中判
断输入框中值，如果输入框中输入的值为空就把isPwdEmpty设置为true，同时更新组件的状态值；反之将isPwdEmpty的值设置为false。组件中的errorText属性
和errorBorder属性检查到isPwdEmpty的值为false时就会在输入框下方显示错误文字信息，同时在输入框周围显示红色边框。

4. 内容总结

最后，我们对本章回的内容做一个全面总结：

• 输入框基于TextField组件实现，它会通过decoration属性来显示错误信息；
• 输入框中的错误信息包信错误文字和红色方框两部分，它们会同时出现输入框中；
• 错误信息通过InputDecoration组件的errorText属性来控制；
• 红色方框通过InputDecoration组件的errorBorder属性来实现；
• 我们需要在输入框的onChanged属性中判断输入的内容，然后更新TextFiled组件的状态；
  看官们，与"如何在在输入框中提示错误"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

这篇关于第三百零八回的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---