第二百五十回 如何在在输入框中提示错误

我们在上一章回中介绍了"如何实现密码输入框"相关的内容，本章回中将介绍 如何在在输入框中提示错误.闲话休提，让我们一起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组件的状态；

看官们，与"如何在在输入框中提示错误如何处理"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!