窗体部件之自定义PushButton

最新推荐文章于 2021-08-25 09:11:57 发布

✇易木残阳

最新推荐文章于 2021-08-25 09:11:57 发布

阅读量649

点赞数

CC 4.0 BY-SA版权

分类专栏： Qt5.5.0+

本文链接：https://blog.youkuaiyun.com/Y673582465/article/details/75048984

Qt5.5.0+ 专栏收录该内容

121 篇文章

订阅专栏

本文介绍了一种使用C++和Qt自定义QPushButton样式的方法，通过不同状态加载对应的图片实现按钮的视觉效果变化，并提供了另一种利用样式表实现类似效果的方案。

pushbutton.cpp

#include "pushbutton.h"

#include <QPainter>
#include <QMouseEvent>
#include <QFontMetrics>
#include <QLabel>

PushButton::PushButton(QString normal, QString hover, QString pressed, QWidget *parent) :
    QPushButton(parent)
{
    buttonState = Normal;

    normalPixmap.load(normal);
    hoverPixmap.load(hover);
    pressPixmap.load(pressed);

    this->setFixedSize(normalPixmap.size());

    this->setContentsMargins(0, 0, 0, 0);
}

PushButton::PushButton(QString background, QWidget *parent) :
    QPushButton(parent)
{
    buttonState = Normal;

    normalPixmap.load(background);
    hoverPixmap.load(background);
    pressPixmap.load(background);

    this->setFixedSize(normalPixmap.size());

    this->setContentsMargins(0, 0, 0, 0);
}

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

    switch(buttonState)
    {
    case Normal:
        painter.drawPixmap(this->rect(), normalPixmap);
        break;
    case Hover:
        painter.drawPixmap(this->rect(), hoverPixmap);
        break;
    case Pressed:
        painter.drawPixmap(this->rect(), pressPixmap);
    }

    painter.drawText(this->rect(), Qt::AlignCenter, this->text());
}

void PushButton::enterEvent(QEvent *)
{
    buttonState = Hover;
    update();
}

void PushButton::leaveEvent(QEvent *)
{
    buttonState = Normal;
    update();
}

void PushButton::mousePressEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        buttonState = Pressed;
        update();
    }
}

bool isOnPushButton(const QPoint &point, const PushButton *pushButton)
{
    if(point.x() < 0 || point.x() > pushButton->width() ||
            point.y() < 0 || point.y() > pushButton->height())
    {
        return false;
    }
    return true;
}

void PushButton::mouseReleaseEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        //判断鼠标抬起时是否在PushButton之上
        if(isOnPushButton(e->pos(), this))
        {
            emit clicked();
        }

        buttonState = Hover;
        update();
    }
}

另外一种用图片组分割的方法设置样式表
这里写图片描述

QPushButton
{
border-image: url(:/images/9d.png) 0 354 0 0;
}
QPushButton:hover
{
border-image:url(:/images/9d.png) 0 236 0 118;
}
QPushButton:pressed
{
border-image:url(:/images/9d.png) 0 118 0 236;
}