QT QSS简单使用

  之前完成的QT程序完成逻辑控制后，界面全都使用图片填充的方式来做美化，但是使用到的组件看上去很丑，因此上网简单学习之后做总结如下：（之前也未学习过CSS等知识属于纯小白，如有错误，不吝赐教）。

1.新建工程（略） 

  新建一个工程用于本次demo的学习。使用的是qweight，并且在文件目录内新建文本，重命名为qss.qss。

2.添加资源文件并读取QSS文件

  新建资源文件，并将刚新建的QSS文件加入到目录中。

 

   之后在weight构造函数里添加如下代码：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QFile file(":/qss.qss");
    file.open(QFile::ReadOnly);
    if(file.isOpen()){
        QString styleSheet = QLatin1String(file.readAll());
        qApp->setStyleSheet(styleSheet);
        file.close();
        qDebug() << "success";
    }
    else
    {
        qDebug()<< "error";
    }
}

  头文件里需要引入QFile和QDebug。使用QFile打开qss文件，如果打开成功，使用qstring读文件中的内容，用qApp->setStyleSheet解析qss文件。运行后控制台打印success第一步就成功啦。

3.qss文件编写验证

  现在ui中添加如下组件方便后续进行qss功能验证：

编译运行后效果如下：

 在qss.qss文件中添加如下代码：

*{
background-color: rgb(80, 80, 80);
}

再次编译运行后：

 至此成功使用qss文件改变ui界面就完成啦。至于其他的qss所能使用的功能可以查阅相关手册。

另附其他一些简单用法：

 qss文件（添加一些按钮点选的样式改变）

*{
background-color: rgb(100, 100, 100);
}
#toolBar {
background-color: rgb(25, 25, 25);
}
#toolBar QPushButton{
color: rgb(250, 250, 250);
background-color: transparent;
}
#toolBar QPushButton:hover{
color:rgb(255, 170, 0);
}
#toolBar QPushButton:pressed{
background-color: rgba(255, 255, 255, 80);
}
#toolBar QPushButton#btnClose:hover{
color: rgb(255, 0, 0);
}

 使用效果：

   

注：toolBar为Layout，需要更改该类为QWeight。

最后感谢大佬提供的学习资料：Qt样式表(QSS)Demo：黑色扁平风格_龚建波的博客-CSDN博客_qss样式表demo