在我们的实际的项目开发过程中会存在这样的需求:同一个按钮根据不同的逻辑显示不同的样式。
效果展示
第一种方式:每次修改逻辑时直接设置stylesheet即可
//正常状态修改样式为
btn->setStyleSheet("QPushButton{background-color:#27a9e3;}"
"QPushButton:hover{background-color:#66c011;}"
"QPushButton:pressed{background-color:yellow;}");
//选中状态修改样式为
btn->setStyleSheet("QPushButton{background-color:red;}");
第二种方式:使用Qss的属性选择器,配置好所有状态的样式表并加载,然后通过修改属性的方式来实现
.qss文件
QPushButton
{
color: white;
background-color: #27a9e3;
border-width: 0px;
border-radius: 3px;
}
QPushButton:hover
{
color: white;
background-color: #66c011;
border-width: 0px;
border-radius: 3px;
}
QPushButton:pressed
{
color: white;
background-color: yellow;
border-width: 0px;
border-radius: 3px;
}
QPushButton[pagematches=true]
{
color: white;
background-color: red;
border-width: 0px;
border-radius: 3px;
}
然后再代码中进行风格切换:
void init()
{
ui->button1->setProperty("pagematches", true);
}
void updataWgtStyle(QWidget *wgt, QString pro, QString val)
{
if (wgt == nullptr)
{
return;
}
wgt->setProperty(pro.toStdString().c_str(), val);
wgt->style()->unpolish(wgt); //清除旧的样式
wgt->style()->polish(wgt); //更新为新的样式
wgt->update();
}
void slot_changStackIndex(int index)
{
if (index== 0)
{
updataWgtStyle(ui->button1, "pagematches", "true");
updataWgtStyle(ui->button2, "pagematches", "false");
updataWgtStyle(ui->button3, "pagematches", "false");
}
else if(index== 1)
{
updataWgtStyle(ui->button2, "pagematches", "true");
updataWgtStyle((ui->button1, "pagematches", "false");
updataWgtStyle(ui->button3, "pagematches", "false");
}
}
第一种方式是将样式直接写到代码里面 ,会比较零散,无法统一管理,反复书写样式属性造成代码的冗余。。
第二种方式可以将样式写到qss文件中,比较友好,方便样式管理。随着程序的成熟,后期可直接将qrc生成rcc资源,实现程序的动态换肤效果。