一、实现效果截图

换肤

二、自定义Widget

1、SkinItem.h 文件

#ifndef SKINITEM_H

#define SKINITEM_H

#include <QWidget>

#include <QLabel>

#include <QPushButton>

#include <QGridLayout>

class SkinItem : public QWidget

{

    Q_OBJECT

public:

    explicit SkinItem(QWidget *parent = nullptr);

    ~SkinItem();

    //选项是否选中

    void setChecked(bool isChecked);

    //设置图片

    void setPixmap(QString icon,QString content);

private:

    QLabel *m_pContentLabel;//皮肤名称

    QLabel *m_pCheckLabel;//选中

    QPushButton *m_pIconButton;//皮肤图片

    QPushButton *m_pIconlayer;//皮肤图层

    int defwidth,defheight;//宽高

    bool ischecked = false;

    //图片样式

    QString style = "QPushButton#SkinItemIcon{"

                    "border:none;"

                    "background-image:url(%0);"

                    "}"

                    "QPushButton#SkinItemIcon:checked{"

                    "border: 3px solid white;"

                    "}";

signals:

    void clicked(QString);

};

#endif // SKINITEM_H

2、SkinItem.cpp 文件

#include "SkinItem.h"

SkinItem::SkinItem(QWidget *parent) :

    QWidget(parent),

    defwidth(118),

    defheight(78)

{

    //皮肤文本

    m_pContentLabel = new QLabel(this);

    m_pContentLabel->setObjectName("SkinItemTitle");

    m_pContentLabel->setText("皮肤名称");

    m_pContentLabel->setFixedHeight(16);

    //图片

    m_pIconButton = new QPushButton(this);

    m_pIconButton->setFixedSize(QSize(defwidth,defheight));

    m_pIconButton->setObjectName("SkinItemIcon");

    m_pIconButton->setCheckable(true);

    //图片图层

    m_pIconlayer = new QPushButton(m_pIconButton);

    m_pIconlayer->setFixedSize(QSize(defwidth,defheight));

    m_pIconlayer->setObjectName("SkinItemIconlayer");

    m_pIconlayer->setCheckable(true);

    m_pIconlayer->raise();

    //选中控件

    m_pCheckLabel = new QLabel(m_pIconlayer);

    m_pCheckLabel->setFixedSize(20,20);

    m_pCheckLabel->setScaledContents(true);

    m_pCheckLabel->setObjectName("SkinItemCheck");

    m_pCheckLabel->move(defwidth*0.78,defheight*0.68);

    m_pCheckLabel->setVisible(false);

    //布局

    QVBoxLayout *mainlayout = new QVBoxLayout;

    mainlayout->setMargin(0);

    mainlayout->setSpacing(0);

    mainlayout->addWidget(m_pIconButton,0,Qt::AlignCenter);

    mainlayout->addWidget(m_pContentLabel,0,Qt::AlignHCenter);

    setLayout(mainlayout);

    setFixedSize(QSize(defwidth,112));

    //信号与槽

    QObject::connect(m_pIconlayer, &QPushButton::clicked, [this](bool) {

        emit clicked(m_pContentLabel->text().trimmed());

    });

}

SkinItem::~SkinItem()

{

}

/**

* 设置是否选中

* @brief SkinItem::setChecked

* @param isChecked

*/

void SkinItem::setChecked(bool isChecked)

{

    m_pIconlayer->setChecked(isChecked);

    m_pIconButton->setChecked(isChecked);

    m_pCheckLabel->setVisible(isChecked);

}

/**

* 设置图片

* @brief SkinItem::setPixmap

* @param icon

*/

void SkinItem::setPixmap(QString icon, QString content)

{

    m_pIconButton->setStyleSheet(style.arg(icon));

    m_pContentLabel->setText(content);

}

3、使用

    QStringList namelist<<"海之夕阳"<<"阳之光芒"<<"樱花夕阳"<<"未来之途";

    QGridLayout *gridlayout = new QGridLayout;

    for (uint8_t i=0;i

        SkinItem *skinitem = new SkinItem;

        skinitem->setPixmap(QString(":/image/skin/skin%0.png").arg(i),namelist.at(i));

        itemList.append(skinitem);

        gridlayout->addWidget(skinitem,0,i,1,1);

        if(currentId == i){

            skinitem->setChecked(true);

        }

        QObject::connect(skinitem,&SkinItem::clicked,[this](QString str){

            setItemChecked(str);

        });

    }

void SkinDialog::setItemChecked(QString str)

{

    int index = namelist.indexOf(str);

    if(currentId == index){

        return;

    }

    currentId = index;

    for (uint8_t i =0;i

        itemList.at(i)->setChecked(i == index);

    }

    emit updateskin(index);

}