只需一步，快速开始
后使用快捷导航没有帐号？
查看: 1538|回复: 13
温故而知新---PyQt5学习笔记系列---特效！QSS！
签到天数: 461 天[LV.9]以坛为家II我最爱的应用:
马上注册加入鱼C，享用更多服务吧^_^
才可以下载或查看，没有帐号？
本帖最后由 wei_Y 于
21:23 编辑
0.jpg (61.4 KB, 下载次数: 1)
20:05 上传
Qt上的控件一般都比较难看。。真的，不信你看，
1.jpg (91.39 KB, 下载次数: 0)
20:09 上传
这样的颜值已经不足以取悦大众了！！但是在designer上并没有发现任何可以修改他样式的地方。
这让人有点失望，Qt咋连样式都改不了，这到底是什么$^%$%^$%^$%#$%!!
原来Qt借鉴CSS的思路，让Qt也使用类似CSS的结构。让界面和美化分离。QSS也和CSS差不多。(CSS应该功能更强大些。)
OK，能美化就好嘛~。
1.&&QSS怎么玩？
窗口部件里有个函数，专门设置样式。
self.setStyleSheet(&&)复制代码设置样式表，奏是辣么直接。
它接受字符串，估计二进制的不接受。
让我们敲上他走起~！
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
class Main(QWidget):
& & def __init__(self, parent=None):
& && &&&super(Main, self).__init__(parent)
& && &&&self.setObjectName('main')
& && &&&self.setWindowTitle('Hello Qt')
& && &&&self.setWindowIcon(QIcon('../pic/e.jpg'))
& && &&&self.resize(300, 300)
& && &&&self.setStyleSheet(&&)
if __name__ == '__main__':
& & app = QApplication(sys.argv)
& & main = Main()
& & main.show()
& & sys.exit(app.exec_())复制代码
2.jpg (8.06 KB, 下载次数: 0)
20:28 上传
呃，好像并没有什么变化！(
3.gif (58.17 KB, 下载次数: 0)
20:27 上传
特么废话，啥也没设置会出现啥变化。)
2.&&咱也是有背景的窗口！
让我们首先创建一只QSS文件，window.qss(其实不用.qss后缀，正常编码的文件都可以。神马.txt .py .gif .avi .rmvb只不过这些看起来好混淆了，用QSS也可以让其他人知道这文件是个啥。)
好啦，话不多说写上几行试试手。
QWidget#main{
& & background:
}复制代码
#代表某控件的名字，就是setObjectName设置的那个名字。如果不设置会给所有的这个控件都设置这个效果。
让我们走起。
3.jpg (7.44 KB, 下载次数: 0)
20:36 上传
哎？你说你的还是个白框？那你肯定忘了
& && &&&with open('window.qss', 'r') as q:
& && && && &self.setStyleSheet(q.read())复制代码
关于颜色代码问题，请百度 颜色代码。( 要不你#000000-#FFFFFF一个个试也可以。)关于颜色搭配问题，请百度&&颜色搭配。
3.&&图片！颜色神马的根本彰显不了本窗口的地位！
QWidget#main{
& & background-image: url(../pic/e.jpg);
}复制代码
但是并没有期望的图片出现。(路径打错除外，图片没有除外。)
那是因为QWidget创建的窗口并不会有图片，不过他的子窗口都会继承这个图片(不指定名字的话)。至于QWidget为毛不能设置上图片，原因不清楚。。
目前找到两种方法解决这个问题。
第一个是换一个继承类。
窗口部件还有QMainWindow可以用，也可以继承QFrame。
第二个是在QWidget中添加一个QFrame让QFrame覆盖住QWidget。然后其他东西在QFrame上写。
不过这样不如直接继承QFrame。
那改成QFrame类:
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
class Main(QFrame):
& & def __init__(self, parent=None):
& && &&&super(Main, self).__init__(parent)
& && &&&self.setObjectName('main')
& && &&&self.setWindowTitle('Hello Qt')
& && &&&self.setWindowIcon(QIcon('../pic/e.jpg'))
& && &&&self.resize(658, 658)
& && &&&with open('window.qss', 'r') as q:
& && && && &self.setStyleSheet(q.read())
if __name__ == '__main__':
& & app = QApplication(sys.argv)
& & main = Main()
& & main.show()
& & sys.exit(app.exec_())复制代码
4.jpg (38.28 KB, 下载次数: 0)
20:49 上传
如果是空白请检查是否存在此图片，路径是否正确。
../表示相对于这层目录的上层，如果是在本层目录下就什么都不要加，否则会变成根目录。
4.&&关于背景的其他属性。
background-position:& &设置背景的位置。top bottom left right 可组合使用。
background-repeat:
& &设置背景是否可以重复。 repeat-x可横向重复沿x轴，repeat-y可纵向重复沿y轴，repeat可沿x，y轴重复，no-repeat不可重复。默认是repeat。选个小点的背景图再把窗口弄大点可看到效果。
background-origin:
& &设置背景的组织。& &margin 外边距&&border 边框&&padding 内边距 content 内容部分。
background-attachment:
& &设置背景附件。& & scroll 滚动，fixed填充。这在一个滚动的区域是让背景图片(一般是图片，颜色的话看不出来。)是让他滚动还是不滚。
background-clip:
& &这个具体属性貌似和origin一样，效果没试过，英语渣看的也不是太懂，附上原文。
The widget's rectangle, in which the background is drawn.
This property specifies the rectangle to which the background-color and background-image are clipped.
This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.
If this property is not specified, the default is border.复制代码
这个矩形控件(不知道为啥叫矩形还是说翻译的不对，还是另有深意，知道的说下啦。)，是在有背景的情况下使用的。
这个属性指示这个矩形的背景颜色和背景图片修剪样子。
这个属性支持QAbstractItemView的子类，QAbstractSpinBox的子类，QCheckBox，QComboBox, QDialog, QFrame, QGroupBox, QLabel,
QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, 和绘画控件。
如果这个属性不被指示，那么默认为边框。
Q:&&你在哪找的这玩意？
A:&&官方文档:
Q:&&有中文版么?
A:&&或许以后会有。。
Q:&&有木有视频教程？
A:&&可以看看css，基本差不多应该。。
感谢楼主无私奉献！
感谢楼主无私奉献！
感谢楼主无私奉献！
本帖被以下淘专辑推荐:
& |主题: 40, 订阅: 17
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 113 天[LV.6]常住居民II
你玩的东西都好高档的说~
话说，下面那个background-clip我理解的意思是不是你设置了background-origin之后背景会空出一部分来，那部分的填充用background-clip设置的东西填充啊？
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 366 天[LV.9]以坛为家II
真是帅到没朋友
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 461 天[LV.9]以坛为家II
你玩的东西都好高档的说~
这个没试过。。
我一般设置个颜色- -。。剩下的那些对于颜色来说基本没啥区别。。
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 378 天[LV.9]以坛为家II
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 198 天[LV.7]常住居民III
这个不错，最好出个详细点的教程，方便模仿
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 31 天[LV.5]常住居民I
教程不错，就是太少了点，没法继续发挥，看英文太费神，渣英文
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 2 天[LV.1]初来乍到
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 2 天[LV.1]初来乍到
好高端的感觉=。=
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 17 天[LV.4]偶尔看看III
钱不够了,下不了了:L
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 17 天[LV.4]偶尔看看III
感谢楼主分享
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 345 天[LV.8]以坛为家I
强烈支持楼主ing...
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 685 天[LV.9]以坛为家II
会了这个， 我也能写出狂拽酷炫叼的界面了——新技能get！
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
签到天数: 3 天[LV.2]偶尔看看I
有没有直接一点的，设计一个软件
如果您的【问题求助】得到满意的解答，请自行将分类修改为【已经解决】；如果想鼓励一下楼主或帮助到您的朋友，可以给他们【评分】鼓励；善用【论坛搜索】功能，那里可能有您想要的答案！
•••(
Powered by下次自动登录
现在的位置:
& 综合 & 正文
QT QSS 使用
QProgressBar{
border-radius: 5
background:
padding: 0
text-align :
QProgressBar::chunk{
background: #B22222;
QTextEdit{
border: 10
border-image: url(image/system/border.png)10 10 10 10 ;
background-color: rgba(43,45,31,255);
QTextEdit[description="true"]{
border: 10
border-image:
background-color: rgba(255,255,255,255);
QTextEdit QScrollBar:vertical
margin: 22px 0 22px 0;
QScrollBar:add-page
background-color: rgba(0,0,0,255);
QScrollBar:sub-page
background-color: rgba(0,0,0,255);
QScrollBar::add-line:vertical
background-color: rgba(43,45,31,255);
height: 15
subcontrol-position:
subcontrol-origin:
QScrollBar::sub-line:vertical
background-color: rgba(43,45,31,255);
height: 15
subcontrol-position:
subcontrol-origin:
QScrollBar::handle:vertical
border : 2
border-radius: 6
background-color:
min-height : 12
QScrollBar::up-arrow:vertical
border-image: url(image/system/button/scroll-up-arrow.png);
QScrollBar::down-arrow:vertical
border-image: url(image/system/button/scroll-down-arrow.png);
QLineEdit#chat_edit{
background-color: rgba(20,20,20,255);
border: 10
height: 20
border-image: url(image/system/border.png)10 10 10 10 ;
QStatusBar::item {
QStatusBar{
background-image: url(image/system/skill-dock.png);
QMenu[private_pile="true"]{
background-color: rgba(43,63,53,200);
border-radius: 1
QPushButton[private_pile="true"]{
background-color: rgba(43,63,53,200);
border-radius: 1
QPushButton[game_control="true"]{
border-radius: 5
padding: 6px 12px 6px 12
QPushButton#pause{
background-image: url(image/system/button/pause.png);
QPushButton#play{
background-image: url(image/system/button/play.png);
QPushButton#slow-down{
background-image: url(image/system/button/slow-down.png);
QPushButton#speed-up{
background-image: url(image/system/button/speed-up.png);
QPushButton#uniform{
background-image: url(image/system/button/uniform.png);
#skill_bar_container QPushButton{
background-image: url(image/system/button/back.png);
border-radius: 4
padding: 6px 12px 6px 12
#skill_bar_container QPushButton:disabled{
background-image: url(image/system/button/back_shade.png);
border-radius: 4
#skill_bar_container QCheckBox{
border-radius: 4
padding: 1px 12px 1px 8
#skill_bar_container QCheckBox::indicator{
#skill_bar_container QCheckBox:unchecked{
background-image: url(image/system/button/frequent_checkbox/unchecked.png);
#skill_bar_container QCheckBox:unchecked:hover{
background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);
#skill_bar_container QCheckBox:unchecked:pressed{
background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);
#skill_bar_container QCheckBox:checked{
background-image: url(image/system/button/frequent_checkbox/checked.png);
#skill_bar_container QCheckBox:checked:hover{
background-image: url(image/system/button/frequent_checkbox/checked_hover.png);
#skill_bar_container QCheckBox:checked:pressed{
background-image: url(image/system/button/frequent_checkbox/checked_press.png);
#skill_bar_container QComboBox{
background-image: url(image/system/button/back2.png);
border-radius: 3
padding: 1px 18px 1px 3
#skill_bar_container QComboBox:on{
padding-left: 4
padding-top: 3
#skill_bar_container QComboBox::drop-down{
border-bottom-right-radius: 3
border-left-color:
border-left-style:
border-left-width: 1
border-top-right-radius: 3
subcontrol-origin:
subcontrol-position:
#skill_bar_container QComboBox::down-arrow:on{
设计QtUi的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟层分开，利于维护。
过程如下：
1、建立文本文件，写入样式表内容，更改文件后缀名为qss；
2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；
3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp-&setStyleSheet就可以使qss生效。
QFile qssFile(":/qss/css.qss");
qssFile.open(QFile::ReadOnly);
if(qssFile.isOpen())
qss = QLatin1String(qssFile.readAll());
qApp-&setStyleSheet(qss);
qssFile.close();
qss 代码如下：
&&&&推荐文章:
【上篇】【下篇】