Qt实现自定义控件

首先实现自定义控件必然需要 qss 还要自定义一个类，这里先列举自定义按钮的实现方式

首先，需要将 qss 样式设置进来：

QFile qss(":/style/style.qss");
// 以只读的方式打开qss文件
if (qss.open(QFile::ReadOnly)) {
    qDebug("Open success");
    QString style = QLatin1String(qss.readAll());
    a.setStyleSheet(style); // 设置样式表
    qss.close();
}

else {
    qDebug("Open failed");
}

需要重写事件，自定义按钮类的定义如下：

#ifndef CLICKEDBTN_H
#define CLICKEDBTN_H

#include <QPushButton>

class ClickedBtn : public QPushButton
{
    Q_OBJECT
public:
    ClickedBtn(QWidget *parent = nullptr);
    ~ClickedBtn();
    void SetState(QString normal, QString hover, QString press);
protected:
    virtual void enterEvent(QEvent *event) override; // 鼠标进入
    virtual void leaveEvent(QEvent *event) override;
    virtual void mousePressEvent(QMouseEvent *event) override;
    virtual void mouseReleaseEvent(QMouseEvent *event) override;
private:
    QString m_normal;
    QString m_hover;
    QString m_press;
};

#endif // CLICKEDBTN_H

下面是自定义按钮的实现：

• 设置初始的动态属性为 normal ，将 SetState() 接口暴露出去便于设置样式
• 在不同的事件中设置动态属性

#include "clickedbtn.h"
#include "global.h"

ClickedBtn::ClickedBtn(QWidget *parent) : QPushButton(parent)
{
    setCursor(Qt::PointingHandCursor);
    setFocusPolicy(Qt::NoFocus); // 保证不会被回车事件优先触发
}

ClickedBtn::~ClickedBtn()
{

}

void ClickedBtn::SetState(QString normal, QString hover, QString press)
{
    m_normal = normal;
    m_hover = hover;
    m_press = press;
    setProperty("state", normal); // 设置动态属性
    repolish(this);
    update();
}

void ClickedBtn::enterEvent(QEvent *event)
{
    setProperty("state", m_hover);
    repolish(this);
    update();
    QPushButton::enterEvent(event);
}

void ClickedBtn::leaveEvent(QEvent *event)
{
    setProperty("state", m_normal);
    repolish(this);
    update();
    QPushButton::leaveEvent(event);
}

void ClickedBtn::mousePressEvent(QMouseEvent *event)
{
    setProperty("state", m_press);
    repolish(this);
    update();
    QPushButton::mousePressEvent(event);
}

void ClickedBtn::mouseReleaseEvent(QMouseEvent *event)
{
    setProperty("state", m_hover);
    repolish(this);
    update();
    QPushButton::mouseReleaseEvent(event);
}

/**
 * @brief repolish 用来刷新qss（使样式表生效）
 */
extern std::function<void(QWidget*)> repolish;

std::function<void(QWidget*)> repolish = [](QWidget *w) {
    w->style()->unpolish(w);
    w->style()->polish(w);
};

下面是设置的是类型为 ClickedBtn （通过类提升），名称为 add_btn 的三种 qss 样式的设置

#add_btn[state='normal'] {
    border-image: url(:/res/add_friend_normal.png);
}

#add_btn[state='hover'] {
    border-image: url(:/res/add_friend_hover.png);
}

#add_btn[state='press'] {
    border-image: url(:/res/add_friend_hover.png);
}

在外部调用接口，将设置的动态属性名称传进去，这样自定义控件的实现就完成了

ui->add_btn->SetState("normal", "hover", "press");