第三百一十三回

文章目录

  • 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的属性值时要及时更新组件的状态,不然修改后也没有效果;
    看官们,与"如何实现密码输入框"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/458840.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JS逆向七】逆向某翻译网站的sign参数,并模拟生成 仅供学习

逆向日期:2024.02.07 使用工具:Node.js 文章全程已做去敏处理!!! 【需要做的可联系我】 可使用AES进行解密处理(直接解密即可):AES加解密工具 1、打开某某网站(请使用文章开头的AES…

洛谷C++简单题小练习day9—[AHOI2017]寻找探监点

day9--[AHOI2017]寻找探监点--2.7 习题概述 题目描述 一个nn 的网格图(标号由 1,1 开始)上有 m 个探测器,每个探测器有个探测半径 r ,问这 nn 个点中有多少个点能被探测到。 输入格式 第一行 3 个整数 n,m,r。 接下来 m 行&…

TCP 粘包/拆包

文章目录 概述粘包拆包发生场景解决TCP粘包和拆包问题的常见方法Netty对粘包和拆包问题的处理小结 概述 TCP的粘包和拆包问题往往出现在基于TCP协议的通讯中,比如RPC框架、Netty等 TCP 粘包/拆包 就是你基于 TCP 发送数据的时候,出现了多个字符串“粘”…

如何修改远程端服务器密钥

前言 一段时间没改密码后,远程就会自动提示CtrlAltEnd键修改密码。但我电脑是笔记本,没有end键。打开屏幕键盘按这三个键也没用。 解决方法 打开远程 1、远程端WINC 输入osk 可以发现打开了屏幕键盘 2、电脑键盘同时按住CtrlAlt(若自身电…

PMP备考的三个阶段及学习方法分享

PMP证书是项目管理必备的关键技能证书,是具备进行项目管理的重要技能体现。无论升职加薪,还是从事项目管理工作,都非常重要。 个人主要从事产品开发工作,开始逐渐承担一些项目经理角色,但目前项目管理知识薄弱&#x…

Spring Data Envers 数据审计实战2 - 自定义监听程序扩展审计字段及字段值

上篇讲述了如何在Spring项目中集成Spring Data Envers做数据审计和历史版本查看功能。 之前演示的是业务表中已有的字段进行审计,那么如果我们想扩展审计字段呢? 比如目前对员工表加入了Audited审计,员工表有个字段为dept_id,为…

14 归并排序和其他排序

1.归并排序 2.计数排序 1. 归并排序 基本思想 建立在归并操作上的一种排序算法,采用分治法的一个典型应用。将已有序的子序列合并,得到完全有序的序列,将两个有序表合成一个称为二路归并。 原数组无序,以中间分割为两个数组,…

用Jmeter进行接口测试

web接口测试工具: 手工测试的话可以用postman ,自动化测试多是用到 Jmeter(开源)、soupUI(开源&商业版)。 下面将对前一篇Postman做接口测试中的接口用Jmeter来实现。 一、Jmeter 的使用步骤 打开Jme…

惊鸿一瞥-网络初识

💕"Echo"💕 作者:Mylvzi 文章主要内容:惊鸿一瞥-网络初识 一.网络的发展过程 网络的发展过程是循序渐进的,大致可以分为四个阶段: 单机时代->局域网时代->广域网时代->互联网时代 单机时代:就是每个机器之间…

linux 06 磁盘管理

01.先管理vm中的磁盘,添加一个磁盘 第一步.vm软件,打开虚拟机设置,添加硬盘 第二步.选择推荐scsi 第三步.创建一个新的虚拟磁盘 第四步. 第五步. 02.在创建好的vm虚拟机中查看刚才创建的磁盘 在centos中/dev 目录是设备目录 sda是磁盘…

S7-1200PLC通讯问题总结

文章目录 一、硬件1.串口通信RS232RS485RS422 2.网口通信 二、协议1.串口通信协议2.网口通信协议 三、程序编写1.S7通信PUTGET 2.开放式以太网通信 一、硬件 可分为PLC与PLC通信,PLC与上位机通信,PLC与变频器通信,PLC与仪器仪表通信&#xf…

数据结构——单链表详解

目录 前言 一.什么是链表 1.概念 ​编辑 2.分类 二.单链表的实现(不带头单向不循环链表) 2.1初始化 2.2打印 2.3创建新节点 2.4头插、尾插 2.5头删、尾删 2.6查找 2.7在指定位置之前插入 2.8在指定位置之后插入 2.9删除pos位置 2.10删除pos之后的 2.11销毁链表…