Qt 自定義一個密碼器 控件 的簡單實現

實現構思：
密碼器的功能可以看成是計算器和登陸界面的組合，所以在實現功能的過程中借鑑了大神的計算器的實現代碼和登陸界面實現的代碼。

實現的效果：

關於密碼器控件的不足：
窗口的標題欄不夠漂亮，但是由於對時間長度和任務進度的權衡，下次一定進行重繪。

代碼思路：
由於我司不用樣式表，所以背景由貼圖函數完成。在widget中添加按鈕控件和文本編輯控件。使用佈局函數進行佈局，在加上一些簡單的邏輯處理功能即可。

首先創建一個工程文件，添加新文件，選擇qt 設計師界面類，如下；
進入創建的ui界面後，添加控件進行佈局，單一的使用了珊格佈局，如下:

• 在自定義控件的佈局中遇到了一些與佈局相關的問題：

  問題1：如何改變佈局內控件的大小？ ui中修改方式如下，純代碼實現也可以去幫助手冊中查找相同的接口函數。
  
  問題2：佈局中控件的位置如何進行更改？

  *ui->gridLayout->setContentsMargins(QMargins(10,60,0,0));
   ui->gridLayout->setVerticalSpacing(10);*

具體size，自行可以調整到比較合適的位置。

源碼實現：
calculaterform.h

#define CALCULATERFORM_H
#include "calacutorbutton.h"
#include <QWidget>
#include <QLineEdit>

namespace Ui {
class CalculaterForm;
}

class CalculaterForm : public QWidget
{
    Q_OBJECT

public:
    explicit CalculaterForm(QWidget *parent = nullptr);
    ~CalculaterForm();

     void  addLineEdit();
     void addBackImg();//可以進行提供一個背景圖片
private slots:

    void on_pushButton_clicked(bool checked);

    void on_pushButton_2_clicked(bool checked);

    void on_pushButton_3_clicked(bool checked);

    void on_pushButton_4_clicked(bool checked);

    void on_pushButton_5_clicked(bool checked);

    void on_pushButton_6_clicked(bool checked);

    void on_pushButton_7_clicked(bool checked);

    void on_pushButton_8_clicked(bool checked);

    void on_pushButton_9_clicked(bool checked);

    void on_pushButton_10_clicked(bool checked);

    void on_pushButton_11_clicked(bool checked);

    void on_pushButton_12_clicked(bool checked);

    void on_pushButton_13_clicked(bool checked);

    void on_pushButton_15_clicked(bool checked);

    void on_pushButton_14_clicked(bool checked);

private:
    Ui::CalculaterForm *ui;
    float mNum1,mNum2,mResult;
    char mSign;
    int mMark;
    QString mKeyStr = "0000";//密碼字符串
    QString S;
    QLineEdit *mLineEdit;

};

#endif // CALCULATERFORM_H

calculaterform.cpp

#include "calculaterform.h"
#include "ui_calculaterform.h"
#include <QLineEdit>
#include <QDebug>
#include <QMessageBox>
CalculaterForm::CalculaterForm(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::CalculaterForm)
{
    ui->setupUi(this);
    mNum1 = 0.0;
    mNum2 = 0.0;
    mResult = 0.0;
    S="";
    mMark=1;
    ui->pushButton_13->setMyIcon("/home/rabbitchenc/Image/dialog_cancel.png");
    ui->pushButton_14->setMyIcon("/home/rabbitchenc/Image/ime_icon_del.png");
    ui->pushButton_15->setMyIcon("/home/rabbitchenc/Image/dialog_ok.png");
    mLineEdit = new QLineEdit(this);
    setFixedSize(width(),height());
    ui->gridLayout->setContentsMargins(QMargins(10,60,0,0));
    ui->gridLayout->setVerticalSpacing(10);
    addBackImg();
    addLineEdit();
    ui->pushButton_10->setEnabled(false);
    ui->pushButton_12->setEnabled(false);
}

//添加文本編輯
void  CalculaterForm::addLineEdit()
{
    if(mLineEdit != nullptr){
        mLineEdit->resize(width(),40);
        mLineEdit->setStyleSheet("background:transparent;border-width:0;border-style:outset");
        mLineEdit->setAlignment(Qt::AlignHCenter);
        mLineEdit->setEchoMode(QLineEdit::Password);
    }
}
//添加背景圖片
void CalculaterForm::addBackImg()
{
    QString filename = "/home/rabbitchenc/Image/ime_bg.png";
    QPixmap pixmap(filename);
    QPalette pal;
    pixmap = pixmap.scaled(width(),height());
    pal.setBrush(QPalette::Window,QBrush(pixmap));
    setPalette(pal);

}

CalculaterForm::~CalculaterForm()
{
    delete ui;
}

void CalculaterForm::on_pushButton_clicked(bool checked)
{
    S += "1";
    mLineEdit->setText(S);

}

void CalculaterForm::on_pushButton_2_clicked(bool checked)
{
    S += "2";
    mLineEdit->setText(S);

}

void CalculaterForm::on_pushButton_3_clicked(bool checked)
{
    S += "3";
    mLineEdit->setText(S);
}

void CalculaterForm::on_pushButton_4_clicked(bool checked)
{
    S += "4";
    mLineEdit->setText(S);

}

void CalculaterForm::on_pushButton_5_clicked(bool checked)
{
    S += "5";
    mLineEdit->setText(S);
}

void CalculaterForm::on_pushButton_6_clicked(bool checked)
{
    S += "6";
    mLineEdit->setText(S);

}

void CalculaterForm::on_pushButton_7_clicked(bool checked)
{
    S += "7";
    mLineEdit->setText(S);

}

void CalculaterForm::on_pushButton_8_clicked(bool checked)
{
    S += "8";
    mLineEdit->setText(S);
}

void CalculaterForm::on_pushButton_9_clicked(bool checked)
{
    S += "9";
    mLineEdit->setText(S);
}

void CalculaterForm::on_pushButton_10_clicked(bool checked)
{

}

void CalculaterForm::on_pushButton_11_clicked(bool checked)
{
    S += "0";
    mLineEdit->setText(S);
}

void CalculaterForm::on_pushButton_12_clicked(bool checked)
{

}

void CalculaterForm::on_pushButton_13_clicked(bool checked)
{
    this->close();
}

void CalculaterForm::on_pushButton_15_clicked(bool checked)
{

    if(S == mKeyStr)
    {
        qDebug() << "right";
        this->close();
    }else{
        qDebug() << "false";
        QMessageBox *messageBox = new QMessageBox(QMessageBox::Warning,"錯誤提示","密碼錯誤");
        messageBox->show();
    }
}
void CalculaterForm::on_pushButton_14_clicked(bool checked)
{
    S = S.left(S.length() - 1);
    mLineEdit->setText(S);
}

自定義的按鈕源碼：
calacutorbutton.h

#ifndef CALACUTORBUTTON_H
#define CALACUTORBUTTON_H
#include <QPushButton>

class CalacutorButton: public QPushButton
{
    Q_OBJECT

public:

    explicit CalacutorButton(QWidget *parent = nullptr);
    ~CalacutorButton();
    void setText(const QString&text);
    void setMyIcon(const QString&icon);
    void setImageName(const QString&img);
    void setPressImg(const QString&img);

protected:
    void paintEvent(QPaintEvent *event);
    void drawText(QPainter *painter);
    void drawImage(QPainter*painter);
    void drawIcon(QPainter*painter);
    QPixmap* ninePatch(QString picName,double iHorzSplit,double iVertSplit, double DstWidth, double DstHeight);
    QPixmap generatePixmap(const QPixmap& img_in, int radius1,int radius2);

private:
    QString  mFileName;
    QString mPressImgName;
    QString mNormalImgName;
    QString mFocusImgName;
    QString mDisableName;
    QString mText;
    QString mIcon;
    int mWidth;
    int mHeight;
    bool pressed;
};

#endif // CALACUTORBUTTON_H

calacutorbutton.cpp

#include "calacutorbutton.h"

#include <QPainter>
#include <QBitmap>
#include <QMouseEvent>
#include <QSizePolicy>

//增加對按鈕類型的設定
//按鈕控件中缺少
CalacutorButton::CalacutorButton(QWidget *parent):QPushButton(parent)
{
    pressed = false;
    mText = "";
    mIcon = "";
    mPressImgName = "/home/rabbitchenc/Image/btn_ime.png";
    mNormalImgName = "";//不添加圖片背景
    mFocusImgName = "";
    mDisableName = "";
    mFileName = mNormalImgName;


    connect(this,&QPushButton::pressed,[=](){
        pressed = true;
        setImageName(mPressImgName);

    });

    connect(this,&QPushButton::released,[=](){

        pressed = false;
        setImageName(mNormalImgName);
    });
}

CalacutorButton::~CalacutorButton()
{

}

void CalacutorButton::paintEvent(QPaintEvent *event)
{
 QPainter painter(this);
 painter.setRenderHint(QPainter::Antialiasing);
 painter.setRenderHint(QPainter::TextAntialiasing);
 drawImage(&painter);
 drawText(&painter);
 drawIcon(&painter);

}
void CalacutorButton::drawImage(QPainter*painter)
{
    painter->save();
    QPixmap pixmap;
    mWidth = width();
    mHeight = height();

    if(isEnabled()){
        if(isCheckable()){
            if(isChecked()){
                mFileName = mPressImgName;
            }else{
                mFileName = mNormalImgName;
            }
            if(pressed){
                mFileName = mFocusImgName;
            }
        }
    }else {
//        mFileName = mDisableName;
}

    pixmap = QPixmap( mFileName);
    painter->drawPixmap(0,0,mWidth,mHeight,pixmap);
    painter->restore();
}



 //添加文字
  void CalacutorButton::drawText(QPainter *painter)
  {
      painter->save();
      QFont font = painter->font();
      painter->drawText(0,0,mWidth,mHeight,Qt::AlignCenter,mText);
      painter->restore();
  }

  //添加圖標
  void CalacutorButton::drawIcon(QPainter*painter)
  {
      painter->save();

      QPixmap pixmap(mIcon);
      if(pressed){
          painter->drawPixmap((width()-pixmap.width())/2,(height()-pixmap.height())/2,pixmap.width(),pixmap.height(),pixmap);
      }else{
          painter->drawPixmap((width()-pixmap.width())/2,(height()-pixmap.height())/2,pixmap.width(),pixmap.height(),pixmap);
      }

      painter->restore();
  }

 void CalacutorButton::setText(const QString&text)
 {
     mText = text;
     update();
 }


void CalacutorButton::setMyIcon(const QString &icon)
{
    mIcon = icon;
    update();
}
void CalacutorButton::setImageName(const QString &img)
{
    mFileName = img;

    update();
}


void CalacutorButton::setPressImg(const QString&img)
{
    mPressImgName = img;

    update();

}