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

• 我的博客：https://blog.csdn.net/qq_37388044
• 我的知乎：https://www.zhihu.com/people/bbtganmin
• 联系方式：知乎私信

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

---

---

前言

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

---

一、遇到的问题

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

---

二、解决方法

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);
}

QString bbtPasswordEdit::text() const
{
    return lineEdit->text();
}

看似很复杂，其实就是这么简单！

效果图：

---