Qt之QSS使用

Qt之QSS使用

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

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

       在这里，先不讲QSS的语法，因为它跟CSS很相似，但更加简单。先讲一下如何 在QWidget中添加QSS：

       首先当然要创建QSS文件，创建 一个QWidget项目，添加一个qrc资源文件，然后增加一个前缀“/”（很关键）。然后在这里添加一个QSS文件（自己新建一个记事本，修改成myQss.qss），添加到qrc资源文件中，效果是这样的：

myQss.qss代码：

[css] view plain copy

1. QPushButton{  
2.         background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));  
3.         border-radius:8px;  
4.         border:2px solid rgb(0, 170, 255)  
5. }  
6.   
7. QPushButton:hover{  
8.         background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.443091, y2:0.898, stop:0 rgba(0, 255, 255, 255), stop:1 rgba(255, 255, 255, 255))  
9. }  
10.   
11. QPushButton:hover:pressed{  
12.         background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.465818, y2:0.875, stop:0 rgba(170, 255, 255, 255), stop:1 rgba(255, 255, 255, 255));  
13. }  

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

[cpp] view plain copy

1. #include "widget.h"  
2. #include <QFile>  
3. #include <QApplication>  
4.   
5. int main(int argc, char *argv[])  
6. {  
7.     QApplication a(argc, argv);  
8.   
9.     QString qss;  
10.     QFile qssFile(":/myQss.qss");  
11.     qssFile.open(QFile::ReadOnly);  
12.   
13.     if(qssFile.isOpen())  
14.     {  
15.         qss = QLatin1String(qssFile.readAll());  
16.         qApp->setStyleSheet(qss);  
17.         qssFile.close();  
18.     }  
19.   
20.     Widget w;  
21.     w.show();  
22.   
23.     return a.exec();  
24. }  

运行的效果：

在ui界面文件中拉了两个pushbutton按钮，发现两个按钮都根据qss文件美化。