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 添加了右側的眼睛圖標，實現密碼的顯示與隱藏切換。這種方式不僅提升了用戶體驗，還優化了界面布局，避免了傳統按鈕方案的笨重感