Qt 漂亮的表单之QSS使用

举报
鱼酱 发表于 2022/01/07 00:35:10 2022/01/07
【摘要】   CSS，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写...
  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 print ?
  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. }  


[cpp] view plain copy print ?
  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文件美化。


文章来源: yujiang.blog.csdn.net，作者：鱼酱2333，版权归原作者所有，如需转载，请联系作者。

原文链接：yujiang.blog.csdn.net/article/details/70860891

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS Qt
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入