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

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

概要

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

整体架构流程

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

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

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

技术名词解释

• QLineEdit：Qt 提供的单行文本输入控件，用于处理用户输入，支持设置回显模式（如密码模式）。
• QAction：Qt 的动作类，可用于菜单、工具栏或小部件，具备可切换（setCheckable）和图标设置功能。
• setEchoMode：QLineEdit 的方法，用于设置文本显示方式，QLineEdit::Password 隐藏输入，QLineEdit::Normal 显示明文。
• toggled：QAction 发出的信号，当 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 的表示（例如菜单项或工具栏按钮）会显示选中状态（通常通过勾选标记或高亮），具体取决于上下文（如 QMenu 或 QToolBar）。
与 QLineEdit 结合：代码中，togglePwd1Action 被添加到 QLineEdit 的 TrailingPosition，通过 addAction，图标会显示为可点击的元素，setCheckable(true) 使点击时状态切换，从而触发你定义的 lambda 槽函数。

默认行为：

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

• 信号槽连接：通过 connect 将 toggled 信号与lambda表达式绑定，动态切换回显模式和图标。
• 代码实现：

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