Qt實現自定義控制元件

zhongGaoKe發表於2020-10-30

       這篇文章將告訴你在QT中如何去自定義控制元件,這裡以QPushButton為例。如果要實現一個自定義的按鍵類。只需要自定義一個類(這裡我自定一個類:class MyButton)讓它從QPushButton派生。然後,去重新定義,paintEvent、enterEvent、leaveEvent、mousePressEvent、mouseReleaseEvent。paintEvent用於實現繪製介面事件,enterEvent是當滑鼠放在按鍵上時事件、leaveEvent是當滑鼠離開按鍵時事件、mousePressEvent是當滑鼠點選按鍵時事件 、mouseReleaseEvent是當滑鼠離開按鍵時的事件。

具體實現程式碼如下:

自定義按鍵控制元件類標頭檔案 mybutton.h

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QPushButton>
#include <QWidget>
#include <QObject>
#include <QPaintEvent>
#include <QEvent>
#include <QMouseEvent>
#include <QPainter>
#include <QToolButton>
/*視窗標題按鍵介面類*/
class MyButton : public QPushButton
{
    Q_OBJECT
public:
    /*!
     * \brief QTitleButton 建構函式,初始化
     * \param str_pix pixmap資源的字串路徑
     * \param parent  父視窗
     */
    QTitleButton(QString str_pix, QWidget *parent = nullptr);
protected:
    /*!
     * \brief paintEvent 繪圖事件
     */
    void paintEvent(QPaintEvent *);

    /*!
     * \brief enterEvent 滑鼠放在按鍵上事件
     */
    void enterEvent(QEvent *);

    /*!
     * \brief leaveEvent 滑鼠離開按鍵事件
     */
    void leaveEvent(QEvent *);

    /*!
     * \brief mousePressEvent 滑鼠點選按鍵事件
     * \param e 滑鼠按鍵型別
     */
    void mousePressEvent(QMouseEvent *e);

    /*!
     * \brief mouseReleaseEvent 滑鼠鬆開按鍵事件
     * \param e 滑鼠事件型別
     */
    void mouseReleaseEvent(QMouseEvent *e);
private:
    //當前的按鍵狀態
    int index;
    QList<QPixmap> list_pix;

};

#endif // MYBUTTON_H

mybutton.cpp 的實現

#include "mybutton.h"

/*標題按鍵介面類實現*/
QTitleButton::QTitleButton(QString str_pix, QWidget *parent):QPushButton (parent)
{
    index = 0;
    QPixmap this_pix(str_pix);

    //標題欄按鍵png格式為4份不同狀態的圖片
    for(int i = 0; i < 3; i++)
    {
        list_pix << this_pix.copy(i*(this_pix.width()/4), 0, this_pix.width()/4, this_pix.height());
    }
}

void QTitleButton::enterEvent(QEvent *)
{
    index = 1;
    update();
}

void QTitleButton::leaveEvent(QEvent *)
{
    index = 0;
    update();
}

void QTitleButton::mousePressEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        index = 2;
        emit clicked();
        update();
    }
}

void QTitleButton::mouseReleaseEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        index = 0;
        update();
    }
}

void QTitleButton::paintEvent(QPaintEvent *)
{
    QPainter p(this);
    QPainter painter(this);
    painter.drawPixmap((width()-list_pix.at(index).width())/2,(height()-list_pix.at(index).height())/2
                             ,list_pix.at(index).width()
                             ,list_pix.at(index).height(),list_pix.at(index));//畫圖畫到中間
}

這樣一個自定義的按鍵就完成了。

相關文章