在繪製介面的時候，我們經常會遇到一個按鈕在滑鼠指向、點選、以及離開的時候顯示不同的狀態，他是怎麼實現的呢？

答案起始很簡單，就是更改這個button的填充圖片

指向、點選、以及離開顯示不同的圖案，可以給出不同的效果

我們首先構建素材  如果一個button是一個n*n的圖片  那麼我們的素材選擇一個4*n*n的圖片  效果如下

滑鼠的離開 進入 點選分別對應上圖中前三個狀態  最後一個代表禁止使用

實現過程：

一、h檔案宣告

class main3Button:public QPushButton
{
    Q_OBJECT
public:
    main3Button(QString pix_listurl,QWidget*parent);
protected:
    void paintEvent(QPaintEvent *);
    void enterEvent(QEvent *);
    void leaveEvent(QEvent*);
    void mousePressEvent(QMouseEvent *e);
    void mouseReleaseEvent(QMouseEvent *e) override;
private:
    QList<QPixmap> m_pixlist;
    int m_index;
    bool m_enter;
};
 

二、c檔案定義

main3Button::main3Button(QString pixnormal,QWidget *parent):QPushButton(parent)
{
    this->setCursor(Qt::PointingHandCursor);
    m_index=0;
    m_enter=false;
    QPixmap pix(pixnormal);
    //將四幅圖片加入QPixmap構成的佇列
    for(int i=0;i<4;i++)
        m_pixlist<<pix.copy(i*(pix.width()/4),0,pix.width()/4,pix.height());

}
void main3Button::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawPixmap((width()-m_pixlist.at(m_index).width())/2,(height()-m_pixlist.at(m_index).height())/2
                             ,m_pixlist.at(m_index).width()
                             ,m_pixlist.at(m_index).height(),m_pixlist.at(m_index));//畫圖畫到中間
}
//滑鼠進入之後  繪製第1張圖
void main3Button::enterEvent(QEvent *)
{
    m_index=1;
    m_enter=true;
    update();
}
//滑鼠離開之後  繪製第0張圖
void main3Button::leaveEvent(QEvent *)
{
    m_index=0;
    m_enter=false;
    update();
}
//左鍵按下之後  繪製第2張圖
void main3Button::mousePressEvent(QMouseEvent *e)
{
    if(e->button()==Qt::LeftButton)//如果是左鍵按下
    {
        m_index=2;
        update();
        QPushButton::mousePressEvent(e);//返回到上級
    }

}

//左鍵放開之後  繪製第1張圖
void main3Button::mouseReleaseEvent(QMouseEvent *e)
{
    if(e->button()==Qt::LeftButton)//如果是左鍵放下
    {
        m_index=1;
        update();
       QPushButton::mouseReleaseEvent(e);//返回到上級 引出按鈕clicked訊號
    }

}
 

根據索引值來顯示不同的圖片

每一次捕獲滑鼠事件 都呼叫update()函式來完成按鍵的重新繪製

三、使用

main3Button *m_btn4=new main3Button(":/image/system_fix.png",this);
m_btn4->setGeometry(710,310,60,60);

ok 大功告成