Qt实现密码输入框隐藏密码_小眼睛显示密码功能

棒棒糖男孩

嵌入式、物联网

我的博客：棒棒糖半糖的博客_CSDN博客-领域博主
我的知乎：棒棒糖男孩
联系方式：知乎私信

转载或者引用本文内容请注明来源及原作者！

前言

Qt的QLineEdit有隐藏密码的功能，但我想实现的是：当鼠标指着一个小眼睛的时候就显示密码，移开就隐藏密码。在网上找了半天也没找到用Qt实现的相关方法，所以我决定自己写一个控件实现它。

遇到的问题

怎么插入图片？直接继承QLineEdit能实现吗？
要如何获取到鼠标指着图片的信号？
怎么限制只能输入数字和限制输入位数？

解决方法

1、继承 QWidget ，定义一个 QLineEdit 和一个 QLabel 来合成控件

用 QLineEdit来放密码。

QLineEdit *lineEdit = new QLineEdit;
lineEdit->setEchoMode(QLineEdit::Password);  //隐藏密码

用 QLabel来放图片。（小眼睛图片可以自己在网上找）

QLabel *pngLabel = new QLabel;
pngLabel->setAlignment(Qt::AlignCenter);
pngLabel->setPixmap(QPixmap(":/images/eye.png").scaled(20, 20));

用 QFrame 来布局合成控件，并重新设置边框

QFrame *frame = new QFrame;
frame->setObjectName("framePassword");
QStringList qss;
qss.append(QString("QFrame#framePassword{border:1px solid %1;}").arg(borderColor));
qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));
qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
frame->setStyleSheet(qss.join(""));
//将控件按照横向布局排列
QHBoxLayout *layout = new QHBoxLayout(frame);
layout->setMargin(0);
layout->setSpacing(0);
layout->addWidget(lineEdit);
layout->addWidget(pngLabel);

2、用 installEventFilter() 将图片控件绑定到事件过滤器

安装事件过滤器

pngLabel->installEventFilter(this);

重写事件过滤

bool bbtPasswordEdit::eventFilter(QObject *watched, QEvent *event)
    switch (event->type()) {
        case QEvent::Enter:
            lineEdit->setEchoMode(QLineEdit::Normal);  //显示密码
            break;
        case QEvent::Leave:
            lineEdit->setEchoMode(QLineEdit::Password);//隐藏密码
            break;
        default:
            break;
    return QWidget::eventFilter(watched, event);

3、输入限制

QRegExp regx("[0-9]+$");        // 限制只能输入数字
QValidator *validator = new QRegExpValidator(regx, lineEdit);
lineEdit->setValidator( validator );
lineEdit->setMaxLength(6);      // 限制只能输入6位

到这里，密码输入框就基本完成啦！

下面奉上完整代码：

bbtpasswordedit.h

#ifndef BBTPASSWORDEDIT_H
#define BBTPASSWORDEDIT_H
#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QRegExpValidator>
#include <QValidator>
#include <QRegExp>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QEvent>
#include <QDebug>
class bbtPasswordEdit : public QWidget
    Q_OBJECT
public:
    explicit bbtPasswordEdit(QWidget *parent = 0);
    QString text() const;
    void setFont(const QFont &font);
protected:
    bool eventFilter(QObject *watched, QEvent *event);
private:
    QLineEdit *lineEdit;
#endif // BBTPASSWORDEDIT_H

bbtpasswordedit.cpp

#include "bbtpasswordedit.h"
// 密码编辑框控件
// 鼠标指着pngLabel显示密码，离开隐藏密码
bbtPasswordEdit::bbtPasswordEdit(QWidget *parent) : QWidget(parent)
    QString bgColor = "#FFFFFF";    //背景颜色
    QString borderColor = "#A6B5B8";//边框颜色
    QLabel *pngLabel = new QLabel;
    pngLabel->setAlignment(Qt::AlignCenter);
    pngLabel->setPixmap(QPixmap(":/images/eye.png").scaled(20, 20));
    lineEdit = new QLineEdit;
    lineEdit->setObjectName("lineEdit");
    lineEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    QRegExp regx("[0-9]+$");        // 限制只能输入数字
    QValidator *validator = new QRegExpValidator(regx, lineEdit);
    lineEdit->setValidator( validator );
    lineEdit->setMaxLength(6);      // 限制只能输入6位
    lineEdit->setEchoMode(QLineEdit::Password);
    pngLabel->installEventFilter(this);
    QFrame *frame = new QFrame;
    frame->setObjectName("framePassword");
    QStringList qss;
    qss.append(QString("QFrame#framePassword{border:1px solid %1;}").arg(borderColor));
    qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));
    qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
    frame->setStyleSheet(qss.join(""));
    //将控件按照横向布局排列
    QHBoxLayout *layout = new QHBoxLayout(frame);
    layout->setMargin(0);
    layout->setSpacing(0);
    layout->addWidget(lineEdit);
    layout->addWidget(pngLabel);
    QVBoxLayout *verticalLayout = new QVBoxLayout(this);
    verticalLayout->setMargin(0);
    verticalLayout->setSpacing(0);
    verticalLayout->addWidget(frame);
bool bbtPasswordEdit::eventFilter(QObject *watched, QEvent *event)
    switch (event->type()) {
        case QEvent::Enter:
            lineEdit->setEchoMode(QLineEdit::Normal);
            break;
        case QEvent::Leave:
            lineEdit->setEchoMode(QLineEdit::Password);
            break;
        default:
            break;
    return QWidget::eventFilter(watched, event);
void bbtPasswordEdit::setFont(const QFont &font)
    lineEdit->setFont(font);