用 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 添加了右侧的眼睛图标,实现密码的显示与隐藏切换。这种方式不仅提升了用户体验,还优化了界面布局,避免了传统按钮方案的笨重感

相关推荐
啊森要自信5 分钟前
【MySQL 数据库】MySQL索引特性(二)页目录&&(B和B+树)&&(非)聚簇索引 && 索引操作
android·数据库·sql·mysql·adb·数据库架构
寒水馨9 分钟前
Java 24 新特性解析与代码示例
java·开发语言·新特性·jdk24·java24
2025年一定要上岸11 分钟前
【Django】-6- 登录用户身份鉴权
数据库·django·sqlite
talented_pure21 分钟前
Python打卡Day30 模块和库的导入
开发语言·python
奋进的孤狼30 分钟前
【Java】在一个前台界面中动态展示多个数据表的字段及数据
java·数据库·oracle
能工智人小辰37 分钟前
Educational Codeforces Round 181 (Rated for Div. 2) A-C
c语言·开发语言
极限实验室43 分钟前
IK 字段级别词典升级:IK reload API
数据库
Simple_core1 小时前
qt中的手势
开发语言·qt
中国lanwp1 小时前
Spring 全局异常处理机制:多个 @ControllerAdvice 与重复 @ExceptionHandler
java·数据库·spring
bing_1582 小时前
如何保护 Redis 实例的安全?
数据库·redis·安全