江南网盟-专注中小企业网站建设服务,注册安全工程师考试科目,暖暖 免费 视频 在线观看1,wordpress邮箱验证文章目录 1. 概念介绍2. 实现方法2.1 obscureText属性2.2 decoration属性 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何实现倒计时功能相关的内容#xff0c;本章回中将介绍如何实现密码输入框.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍… 文章目录 1. 概念介绍2. 实现方法2.1 obscureText属性2.2 decoration属性 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何实现倒计时功能相关的内容本章回中将介绍如何实现密码输入框.闲话休提让我们一起Talk Flutter吧。 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的属性值时要及时更新组件的状态不然修改后也没有效果 看官们与如何实现密码输入框相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
