Qt使用QSS

1 QSS介绍

QSS称为QtStyleSheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

CSS，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

借用CSS的灵感，Qt也支持Qt自己的CSS，简称QSS。同CSS相似，CSS的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，CSS机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。

2 QSS在Qt中的使用办法

2.1 新建QSS文件

1) 在Qt项目文件夹中，“右键”---“新建”---“文本文档”

2) 在文本文档中写入样式表内容

/* 正常状态或者鼠标松开按钮的状态，按钮颜色 */
QPushButton
{
    background-color:rgb(240,255,255);
    color: rgb(0, 0, 2);
    border-style: outset;
    border-color: beige;
    border-radius: 10px;
}

/* hover按钮悬浮，鼠标悬浮在按钮上的状态，按钮颜色 */
 QPushButton:hover 
{
    background-color:rgb(14, 220, 0);
    border-radius: 10px;
    color: rgb(0, 0, 0);
}

 /* 鼠标按下按钮时的状态，按钮颜色 */
QPushButton:checked 
{
    background-color:rgb(14, 170, 79);
    border-radius: 10px;
    color: rgb(255, 255, 0);
}

3) 将文件名后缀名更改为qss，如更改为“myQss.qss”

2.2 新建资源文件

“右键项目”---“添加新文件”，选择“Qt类”---再选择“Qt Resource File”

点击“choose”，可得到

在“名称”中添加资源文件名“qss”，然后点击“下一步”，得到

点击完成，可以看到添加的资源文件如图所示

2.3 新建Prefix为"/"的空文件夹

右键“qss.qrc”---“Add Prefix”

在“Prefix”中添加“/”，指定文件夹名为“/”，然后点击“OK”

2.4 将qss文件加入qrc资源文件中

右键“/”文件夹，点击“添加现有文件”，选择“myQss.qss”

点击“打开”，就将“myQss.qss”文件加入资源文件“qss.qrc”中啦

2.5 创建QFile对象

通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

在main.cpp中，添加以下代码：

#include "mainwindow.h"
#include <QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /*****************************************/
    QString qss;
    QFile qssFile(":/myQss.qss");
    qssFile.open(QFile::ReadOnly);
    if(qssFile.isOpen())
    {
      qss = QLatin1String(qssFile.readAll());
      qApp->setStyleSheet(qss);
      qssFile.close();
    }
    /*****************************************/
    MainWindow w;
    w.show();
    return a.exec();
}

3 运行效果

运行程序后，按键后出现绿色背景

4 参考文献

Qt之QSS使用

Qt Creator项目中使用qss

版权声明：

本文首发于onefish51的博客（http://www.cnblogs.com/onefish51和https://blog.csdn.net/weixin_31075593），未经允许不得转载，版权所有，侵权必究。