Qt通过qss动态切换按钮样式

果果酱_

已于 2024-04-12 15:26:48 修改

阅读量989

点赞数 12

文章标签： qt 开发语言 c++

于 2024-04-12 15:21:28 首次发布

本文链接：https://blog.youkuaiyun.com/guoguojiang_/article/details/137680460

版权

文章讨论了在项目开发中如何通过Qss属性选择器管理和切换按钮的不同样式，以及使用QRC/RCC资源实现动态换肤，以提高代码整洁度和后期维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们的实际的项目开发过程中会存在这样的需求：同一个按钮根据不同的逻辑显示不同的样式。

效果展示

在这里插入图片描述

第一种方式：每次修改逻辑时直接设置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");
    }
}