技術標籤：qt原始碼c++

目錄

• 前言
• 一、遇到的問題
• 二、解決方法
• • 1、繼承 QWidget ，定義一個 QLineEdit 和一個 QLabel 來合成控制元件
  • 2、用 installEventFilter() 將圖片控制元件繫結到事件過濾器
  • 3、輸入限制
• 到這裡，密碼輸入框就基本完成啦！

前言

  Qt的QLineEdit有隱藏密碼的功能，但我想實現的是：當滑鼠指著一個小眼睛的時候就顯示密碼，移開就隱藏密碼。在網上找了半天也沒找到用Qt實現的相關方法，所以我決定自己寫一個控制元件實現它。

一、遇到的問題

1. 怎麼插入圖片？直接繼承QLineEdit能實現嗎？
2. 要如何獲取到滑鼠指著圖片的訊號？

二、解決方法

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

看似很複雜，其實就是這麼簡單！

效果圖：