【Qt 控件】自定义按钮

效果图
核心源代码
GitHub代码下载

效果图

核心源代码

MyButton.h

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QWidget>
#include <QTimer>
#include <QPainter>
#include <QMouseEvent>

class MyButton : public QWidget
{
    Q_OBJECT

public:
    explicit MyButton(const bool& bType = false, QWidget *parent = 0);
    void SetPaintText(const QString& sText); // 设置绘制文本
    void SetBlockColor(const QColor& color); // 设置色块颜色
    QString GetPaintText(); // 获得绘制文本
    QColor GetBlockColor(); // 获得色块颜色

protected:
    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE; // 绘制事件
    void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE; // 鼠标按下事件
    void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE; // 鼠标释放事件

signals:
    // 状态改变时，发射信号
    void toggled();

private:
    bool m_bChecked;         // 是否选中
    QColor m_checkColor;   // 选中颜色
    QString m_sText; // 绘制文本

    bool m_bType; // 为0则显示文本，为1则显示色块
};

#endif // MYBUTTON_H

MyButton.cpp

#include "MyButton.h"

MyButton::MyButton(const bool& bType, QWidget *parent)
    : QWidget(parent)
{
    // 鼠标滑过光标形状 - 手型
    setCursor(Qt::PointingHandCursor);

    m_checkColor = QColor(0, 150, 136);
    m_bChecked = false;
    m_bType = bType;

    this->setFixedSize(128, 60);
}

// 绘制开关
void MyButton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    // 根据按钮状态，设置绘制颜色
    QColor paintColor;
    if (isEnabled()) { // 判断按钮是否可用
        // 可用状态
        if (m_bChecked)
            paintColor = QColor(73, 143, 248);
        else
            paintColor = QColor(112, 112, 112);
    } else {
        // 不可用状态
        paintColor = QColor(190, 190, 190, 0.26);
    }

    QPainter painter(this);
    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置画笔颜色
    QPen pen;
    pen.setWidth(3);
    pen.setColor(paintColor);
    painter.setPen(pen);
    // 绘制边框
    painter.drawRoundRect(0, 0, 128, 60, 8);
    // 绘制多边形-倒三角形箭头
    const QPointF points[4] = {QPointF(84, 20), QPointF(106, 20), QPointF(95, 40), QPointF(84, 20)};
    painter.setBrush(paintColor);
    painter.drawPolygon(points, 4);

    if (!m_bType) {
        // 绘制文本
        QFont font;
        font.setFamily("Microsoft YaHei");
        font.setPointSize(20);
        painter.setFont(font);
        painter.drawText(QRect(14, 11, 128, 60), m_sText);
    } else {
        // 绘制色块
        if (m_checkColor.red() == 255) {
            painter.setPen(QPen(QColor(191, 191, 191), 1)); // 设置边框颜色
            painter.setBrush(m_checkColor);
            painter.drawRoundRect(12, 10, 41, 41, 5, 5);
        } else {
            painter.setPen(m_checkColor);
            painter.setBrush(m_checkColor);
            painter.drawRoundRect(12, 10, 41, 41, 5, 5);
        }
    }
}

// 鼠标按下事件
void MyButton::mousePressEvent(QMouseEvent *event)
{
    if (isEnabled()) {
        if (event->buttons() & Qt::LeftButton) {
            m_bChecked = true;
            this->update();
        }
    }
}

// 鼠标释放事件 - 切换开关状态、发射toggled()信号
void MyButton::mouseReleaseEvent(QMouseEvent *event)
{
    if (isEnabled()) {
        if ((event->type() == QMouseEvent::MouseButtonRelease) \
                && (event->button() == Qt::LeftButton)) {
            event->accept();
            emit toggled();
            m_bChecked = false;
            this->update();
        }
    }
}

// 设置绘制文本
void MyButton::SetPaintText(const QString& sText)
{
    m_sText = sText;
    this->update();
}

// 设置色块颜色
void MyButton::SetBlockColor(const QColor& color)
{
    m_checkColor = color;
}

// 获得绘制文本
QString MyButton::GetPaintText()
{
    return m_sText;
}

// 获得色块颜色
QColor MyButton::GetBlockColor()
{
    return m_checkColor;
}

Widget.cpp

#include "widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 初始化自定义按钮
    MyButton *pBtnPos = new MyButton(false);
    MyButton *pBtnSize = new MyButton(false);
    MyButton *pBtnColor = new MyButton(true);
    pBtnPos->SetPaintText(QString::fromLocal8Bit("居中"));
    pBtnColor->SetBlockColor(QColor(196, 68, 21));
    pBtnSize->SetPaintText(QString::fromLocal8Bit("20px"));

    // 水平布局
    QHBoxLayout *pHLayoutMain = new QHBoxLayout(this);
    pHLayoutMain->addWidget(pBtnPos);
    pHLayoutMain->addWidget(pBtnColor);
    pHLayoutMain->addWidget(pBtnSize);

    // 连接信号槽
    connect(pBtnPos, SIGNAL(toggled()), this, SLOT(onToggled()));
    connect(pBtnColor, SIGNAL(toggled()), this, SLOT(onToggled()));
    connect(pBtnSize, SIGNAL(toggled()), this, SLOT(onToggled()));
}

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

// 自定义按钮触发信号槽
void Widget::onToggled()
{
    qDebug() << "clicked";
}