我的博客：/qq_37388044我的知乎：/people/bbtganmin联系方式：知乎私信
转载或者引用本文内容请注明来源及原作者！
目录
前言一、遇到的问题二、解决方法1、继承 QWidget ，定义一个 QLineEdit 和一个 QLabel 来合成控件2、用 installEventFilter() 将图片控件绑定到事件过滤器3、输入限制到这里，密码输入框就基本完成啦！前言
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_OBJECTpublic: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();}
看似很复杂，其实就是这么简单！
效果图：
