前言
QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器少,可以使用的QSS属性也少,而且并不是所有的属性都可以应用在PyQt的控件上,QSS使页面美化跟代码层分开,利于维护
QSS的语法规则
QSS的语法规则几乎与CSS相同,QSS样式由两部分组成,其中一部分是选择器(Selector),指定哪些软件会受到影响,另一部分是声明(Declaration),指定哪些属性应该在控件上进行设置,声明部分是一系列的“属性:值”对,使用(;)分割各个不同的属性值对,使用大括号({})将所有的声明包括在内,例如
QPushButton{color:red}
表示设置QPushButton类及其子类的所有实例的前景色是红色,其中,QPushButton表示选择器,指定所有的QPushButton类及其子类都会受到影响,注意,凡是继承自QPushButton的子类都会受到影响,这是与Css不同的地方,因为css应用的都是一些标签,没有类的结构,更没有子类的概念,{color:red}则是规则的定义,表示指定前景色是红色
实例:QSS语法规则示范
import sys
from PyQt5.QtWidgets import *
class WindowDemo(QWidget):
def __init__(self):
super(WindowDemo, self).__init__()
#设置窗口标题
self.setWindowTitle('QSS样式')
#实例化按钮,设置显示文本
btn1=QPushButton(self)
btn1.setText('按钮1')
# 实例化按钮,设置显示文本
btn2=QPushButton(self)
btn2.setProperty('name','btn2')
btn2.setText('按钮2')
#添加控件到布局中,设置窗口布局方式
vbox=QVBoxLayout(self)
vbox.addWidget(btn1)
vbox.addWidget(btn2)
#设置样式;按钮的背景颜色绿色
# qssStyle = '''
# QPushButton[name='btn2']{background-color:green}
# '''
qssStyle = '''
QPushButton{background-color:green}
'''
#加载设置好的样式
self.setStyleSheet(qssStyle)
if __name__ == '__main__':
app=QApplication(sys.argv)
win=WindowDemo()
win.show()
sys.exit(app.exec_())
运行效果如下
代码分析
在这个例子中。整个窗口加载自定义的QSS样式,窗口中的按钮背景色都为绿色
首先定义了QSS样式,然后使用setStyleSheet()函数加载QSS样式,setStyleSheet()函数本身是QWidget的成员函数,PyQt中的大多数控件都是可以直接通过该函数来设置样式
qssStyle = '''
QPushButton{background-color:green}
'''
#加载设置好的样式
self.setStyleSheet(qssStyle)
还可以使用多个选择器指定相应的声明,使用逗号将各个选择器分离,例如
QPushButton,QLineEdit,QComboBox {color:blue}
它相当于
QPushButton {color:blue}
QLineEdit {color:blue}
QComboBox {color:blue}
QSS选择器类型
QSS选择器有如下几种类型
类型 | 解析 |
---|---|
通配选择器 | *, 匹配所有的控件 |
类型选择器 | QPushButton,匹配所有的QPushButton类及其子类的实例 |
属性选择器 | QPushButton[name=’mybtn’],匹配所有的name属性是myBtn的QPushButton实例。注意,该属性是可以自定义的,不一定非得是类本身具有的属性 |
示范;修改上面例子
给btn2设置属性名,代码如下
btn2.setProperty('name','btn2')
修改QSS样式表
#设置样式;按钮的背景颜色绿色
qssStyle = '''
QPushButton[name='btn2']{background-color:green}
'''
运行程序,效果如下
类型 | 解析 |
---|---|
类选择器 | .QPushButton,匹配所有的QPushButton实例,但是不匹配子类,注意,前面有一个点,这是与css类选择器不同的地方 |
ID选择器 | myButton,匹配所有的ID为myButton的控件,这里的id实际上就是objectName指定的值 |
后代选择器 | QDialog QPushButton,匹配所有的QDialog容器中包含的QPushButton,不管是直接的,还是间接的 |
子选择器 | QDialog>QPushButton,匹配所有的QDialog容器中包含的QPushButton,其中要求QPushButton的直接父类容器是QDialog |
另外,上面所有的选择器可以联合使用,并且支持一次设置多种选择器类型,用逗号隔开,例如
#framecut,#frameInterrupt,#frameJoin {color:red}
表示这些ID使用的都是一个规则
#mytable QPushButton {color:red}
表示选择所有ID为mytable的容器中包含的QPushButton
相关源码及素材
https://download.csdn.net/download/jia666666/10616087