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(170255255255), stop:1 rgba(255255255255));  
  3.         border-radius:8px;  
  4.         border:2px solid rgb(0170255)  
  5. }  
  6.   
  7. QPushButton:hover{  
  8.         background:qlineargradient(spread:pad, x1:0.460227, y1:0, x2:0.443091, y2:0.898, stop:0 rgba(0255255255), stop:1 rgba(255255255255))  
  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(170255255255), stop:1 rgba(255255255255));  
  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文件美化。


展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读