第三百一十二回

1. 概念介绍

在实际项目中会遇到输入密码需求，我们将在本章回中介绍如何实现密码输入框。该需求基于TextField组件实现，通过使用组件中相关的属性可以实现密码输入框功能.
我们在前面章回中介绍过TextFiled组件的基本用法，本章回中的内容可以看作是TextField组件的扩展用法。

2. 实现方法

实现密码输入框功能主要使用TextField组件的obscureText和decoration属性，接下来我们分别介绍这两个属性的用法：

2.1 obscureText属性

该属性主要用来控制显示或者隐藏输入框中的内容，这里说的隐藏是指输入密码时显示小黑点，而不是具体的内容。该属性是bool类型，它的值为true时正常显示输入框
中的内容，它的值为false时隐藏显示输入框中的内容。

2.2 decoration属性

该属性主要用来显示密码图标，点击图标后可以显示或者隐藏输入框中输入的内容。我们通常使用InputDecoration组件给它赋值，同时在该组件的suffixIcon属性
中存放一个IconButton组件，这样就可以通过点击图标按钮来显示或者隐藏输入框中的内容。我们将在后面的小节中通过具体的示例代码来演示。

3. 示例代码

TextField(
  obscureText: !isPasswordVisible,
  keyboardType: TextInputType.text,

  decoration: InputDecoration(


    ///用来去掉输入框下面的横线
    border: InputBorder.none,

    ///实现显示和隐藏密码功能
    suffixIcon: IconButton(
      icon:isPasswordVisible ? const Icon(Icons.visibility) : const Icon(Icons.visibility_off),
      onPressed: () {
        setState(() {
          isPasswordVisible = !isPasswordVisible;
        });
      },
    ),
  ),
  ///这里的值配合光标监听器和两个border一起实现红色边框错误提示功能
  onChanged: (value) {
    setState(() {
      pwdValue = value;
    });
  },
),

我们在上面示例代码中定义了一个bool类型的变量isPasswordVisible，并且将它赋值给obscureText属性。然后在点击按钮时修改它的值，这样就可以显示或者隐
藏输入框中的内容。此外，这个值还用来控制图标的样式，代码中使用了睁眼和闭眼两个图标，它的值为true时显示睁眼图标，反之显示闭眼图标。这里的按钮就是存放
在suffixIcon属性中的组件，它会在输入框最右侧显示一个睁眼或者闭眼的图标。

4. 内容总结

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

• 使用TextField组件的obscureText属性可以显示或者隐藏输入框中内容；
• 使用TextField组件的decoration属性可以在输入框最右侧显示一个图标；
• 在图标中响应点击事件，并且在点击事件中修改bscureText的属性值；
• 修改bscureText的属性值时要及时更新组件的状态，不然修改后也没有效果；
  看官们，与"如何实现密码输入框"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!