QT自制类分享 一图流按钮

在寻找360的ui素材时发现了这样的图片

于是就起了写一个按钮控件的想法

1.确认按钮状态

查阅文档后并没有在QPushButton中发现关于按钮状态的信息（比如鼠标悬停，按下等），所以此控件将继承自QWidget并由自己实现对按钮状态的获取

pushbutton.h

#include <QWidget>
#include <QMouseEvent>
class PushButton : public QWidget
{
    Q_OBJECT
public:
    PushButton(QWidget *parent = 0);
    ~PushButton();
protected:
    enum State{normal,enter,press};
    State state;
    void enterEvent(QEvent *);
    void leaveEvent(QEvent *);
    void mousePressEvent(QMouseEvent *);
    void mouseReleaseEvent(QMouseEvent *);
signals:
    void clicked();
};

pushbutton.cpp

PushButton::PushButton(QWidget *parent)
    : QWidget(parent)
{
    
}

PushButton::~PushButton()
{
    
}

void PushButton::enterEvent(QEvent *)
{
    state=enter;
    update();
}

void PushButton::leaveEvent(QEvent *)
{
    state=normal;
    update();
}

void PushButton::mousePressEvent(QMouseEvent *event)
{
    if(event->button()==Qt::LeftButton)
    {
        state=press;
        update();
    }
}

void PushButton::mouseReleaseEvent(QMouseEvent *event)
{
//允许按下后通过移开鼠标来取消
    if(event->button()==Qt::LeftButton)
    {
        if(event->pos().x()<0||event->pos().x()>geometry().width()||
                event->pos().y()<0||event->pos().y()>geometry().height())
            state=normal;
        else
        {
            emit clicked();
            state=enter;
        }
        update();
    }
}

通过重写4种鼠标事件我们获得了按钮当前状态，并在按下时发出点击信号

2.绘制按钮

在PushButton类中添加头文件<QPainter>

然后对构造函数进行修改并添加以下代码

pushbutton.h

    PushButton(QString file,QWidget *parent=0);
    void setPicture(QString file);
private:
    QPixmap m_pixmap;
protected:
    void paintEvent(QPaintEvent *);

pushbutton.cpp

PushButton::PushButton(QString file,QWidget *parent):PushButtonBase(parent),state(normal)
{
    m_pixmap.load(file);
    setFixedSize(m_pixmap.width()/4,m_pixmap.height());
}

void PushButton::setPicturn(QString file)
{
    m_pixmap.load(file);
    setFixedSize(m_pixmap.width()/4,m_pixmap.height());
    update();
}

void PushButton::paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    int flag;
    switch (state)
    {
    case normal:
        flag=0;
        break;
    case enter:
        flag=1;
        break;
    case press:
        flag=2;
        break;
    }
    painter.drawPixmap(rect(),m_pixmap,QRect(m_pixmap.width()/4*flag,0,
                                             m_pixmap.width()/4,m_pixmap.height()));
}

完成！！！！！！！！！

3.使用

在main函数中使用PushButton类

#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    PushButton w("D:/QTobject/360demo/image/custom");//你自己的图片目录
    w.show();
    return a.exec();
}

运行结果如下

正常

悬停时

按下时