用 Qt 打造优雅的密码输入框:添加右侧眼睛图标切换显示

Qt 技巧:通过 QLineEdit 右侧眼睛图标实现密码可见性切换

文章目录

概要

本文介绍如何使用 Qt 框架为 QLineEdit 控件添加一个右侧的眼睛图标,通过点击实现密码的显示与隐藏功能。这种方法相比传统在右侧添加按钮并放置图标的方式,更具集成性和美观性,适合现代应用程序的用户界面设计

整体架构流程

实现这一功能的主要步骤包括:

  1. 准备资源 :加载隐藏和显示密码状态的图标(例如 eyebrow (1).pngeye (1).png)。
  2. 创建 QAction :为 QLineEdit 添加可切换的 QAction 图标。
  3. 绑定信号与槽 :通过 QAction::toggled 信号,动态切换 QLineEdit 的回显模式(setEchoMode)和图标。
  4. 界面更新:根据用户点击状态,实时更新 UI 效果。

整体流程以事件驱动的方式运行,用户点击图标触发信号,槽函数处理逻辑并更新界面

技术名词解释

  • QLineEdit:Qt 提供的单行文本输入控件,用于处理用户输入,支持设置回显模式(如密码模式)。
  • QAction :Qt 的动作类,可用于菜单、工具栏或小部件,具备可切换(setCheckable)和图标设置功能。
  • setEchoModeQLineEdit 的方法,用于设置文本显示方式,QLineEdit::Password 隐藏输入,QLineEdit::Normal 显示明文。
  • toggledQAction 发出的信号,当 checkable 动作状态改变时触发。

技术细节

以下是实现代码的详细说明:

  • 资源加载 :使用 QIcon 加载资源文件 :/chat_img/eyebrow (1).png(隐藏状态)和 :/chat_img/eye (1).png(显示状态)。这些资源需在 .qrc 文件中注册。
  • QAction 配置 :为每个 QLineEdit 创建一个 QAction,初始图标为 eyeIcon,并设置为可切换状态。
  • setCheckable 的功能

定义:

setCheckable(bool) 方法将 QAction 设置为可检查状态(true)或不可检查状态false)

当设置为 true 时,QAction 会具有"选中"(checked)和"未选中"(unchecked)两种状态,用户可以通过交互(例如点击)切换其状态。

作用:

状态切换:可检查的 QAction 会在触发时发送 toggled(bool) 信号,通知其状态是否改变(true 表示选中,false 表示未选中)

视觉反馈:在 UI 中,QAction 的表示(例如菜单项或工具栏按钮)会显示选中状态(通常通过勾选标记或高亮),具体取决于上下文(如 QMenuQToolBar)。

QLineEdit 结合:代码中,togglePwd1Action 被添加到 QLineEdit 的 TrailingPosition,通过 addAction,图标会显示为可点击的元素,setCheckable(true) 使点击时状态切换,从而触发你定义的 lambda 槽函数。

默认行为:

默认情况下,QAction checkable 属性为 false,表示它只是一个普通的动作,不会维护选中状态

  • 信号槽连接 :通过 connecttoggled 信号与lambda表达式绑定,动态切换回显模式和图标。
  • 代码实现
cpp 复制代码
   //隐藏
    QIcon eyeIcon(":/chat_img/eyebrow (1).png");
    //展示
    QIcon dpeyeIcon(":/chat_img/eye (1).png");


    // 为第一个密码框添加图标
    QAction* togglePwd1Action = new QAction(eyeIcon, "显示/隐藏密码", this);
    togglePwd1Action->setCheckable(true);
    ui->userpwd_edit->addAction(togglePwd1Action, QLineEdit::TrailingPosition);


    // 为第二个密码框添加图标
    QAction* togglePwd2Action = new QAction(eyeIcon, "显示/隐藏密码", this);
    togglePwd2Action->setCheckable(true);
    ui->lineEdit->addAction(togglePwd2Action, QLineEdit::TrailingPosition);

    connect(togglePwd1Action, &QAction::toggled, this, [this,togglePwd1Action,eyeIcon,dpeyeIcon](bool checked) {
        ui->userpwd_edit->setEchoMode(checked ? QLineEdit::Normal : QLineEdit::Password);
        togglePwd1Action->setIcon(checked ? dpeyeIcon : eyeIcon);
    });

    connect(togglePwd2Action, &QAction::toggled, this, [this,togglePwd2Action,eyeIcon,dpeyeIcon](bool checked) {
        ui->lineEdit->setEchoMode(checked ? QLineEdit::Normal : QLineEdit::Password);
        togglePwd2Action->setIcon(checked ? dpeyeIcon : eyeIcon);
    });

实现效果展示

通过上述方法,我们成功为 QLineEdit 添加了右侧的眼睛图标,实现密码的显示与隐藏切换。这种方式不仅提升了用户体验,还优化了界面布局,避免了传统按钮方案的笨重感

相关推荐
superlls43 分钟前
(计算机网络)JWT三部分及 Signature 作用
java·开发语言·计算机网络
.Shu.1 小时前
Mysql InnoDB 底层架构设计、功能、原理、源码系列合集【四、事务引擎核心 - MVCC与锁机制】
数据库·mysql
多工坊1 小时前
【DataGrip】连接达梦数据库后,能查询数据但是看不到表的几种情况分析,达梦数据库驱动包下载DmJdbcDriver18.jar
java·数据库·jar
一只鲲1 小时前
56 C++ 现代C++编程艺术5-万能引用
开发语言·c++
何中应2 小时前
如何用Redis作为消息队列
数据库·redis·缓存
liulilittle2 小时前
.NET反射与IL反编译核心技术
开发语言·数据库·c#·.net·反射·反编译·il
老纪的技术唠嗑局2 小时前
向量数据库在 UGC 社区个性化推荐的落地指南
数据库
张鱼小丸子2 小时前
MySQL企业级部署与高可用实战
运维·数据库·mysql·云原生·高可用·mha·组从复制
GalaxyPokemon2 小时前
MYSQL的默认隔离级别都有什么
数据库·mysql
扛麻袋的少年2 小时前
6.Kotlin的Duration类
android·开发语言·kotlin