一、实现效果截图
二、自定义Widget
1、SkinItem.h 文件
#ifndef SKINITEM_H
#define SKINITEM_H
#include
#include
#include
#include
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);
}