QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮
每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件 2. 声明,该部分指定要在控件上使用的属性
1 import sys 2 from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QLineEdit, \ 3 QComboBox, QStackedWidget, QGroupBox, QVBoxLayout 4 5 class Demo(QWidget): 6 def __init__(self): 7 super(Demo, self).__init__() 8 self.button1 = QPushButton('button1', self) 9 self.button2 = QPushButton('button2', self) 10 self.button2.setProperty('name', 'btn') #给控件添加一个属性 11 #属性名:name 12 #属性值:'btn' 13 14 self.lineedit1 = QLineEdit(self) 15 self.lineedit1.setPlaceholderText('direct') 16 self.lineedit2 = SubLineEdit() 17 18 my_list = ['A', 'B', 'C', 'D'] 19 self.combo = QComboBox(self) 20 self.combo.addItems(my_list) 21 self.combo.setObjectName('cb') #将控件的objectName设置为cb 22 23 self.gb = QGroupBox() 24 self.label1 = QLabel('label1') 25 self.label2 = QLabel('label2') 26 self.stack = QStackedWidget() 27 self.stack.addWidget(self.label2) 28 29 self.gb_layout = QVBoxLayout() 30 self.gb_layout.addWidget(self.label1) #分组框gb直接包含label1 31 self.gb_layout.addWidget(self.stack) #分组框gb间接包含label2 32 self.gb.setLayout(self.gb_layout) 33 34 self.v_layout = QVBoxLayout() 35 self.v_layout.addWidget(self.button1) 36 self.v_layout.addWidget(self.button2) 37 self.v_layout.addWidget(self.lineedit1) 38 self.v_layout.addWidget(self.lineedit2) 39 self.v_layout.addWidget(self.combo) 40 self.v_layout.addWidget(self.gb) 41 self.setLayout(self.v_layout) 42 43 class SubLineEdit(QLineEdit): 44 def __init__(self): 45 super(SubLineEdit, self).__init__() 46 self.setPlaceholderText('indirect') 47 48 if __name__ == '__main__': 49 app = QApplication(sys.argv) 50 demo = Demo() 51 qss = ''' 52 * {color: red} 53 QPushButton {background-color: blue} 54 QPushButton[name='btn'] {background-color: green} 55 .QLineEdit {font: bold 20px} 56 QComboBox#cb {color: blue} 57 QGroupBox QLabel {color: blue} 58 QGroupBox > QLabel {font: 30px} 59 '''
#定义样式
60 demo.setStyleSheet(qss) #给demo对象设置样式 61 demo.show() 62 sys.exit(app.exec_())
选择器:
* 匹配所有控件
QPushButton 匹配所有QPushButton实例及其子类
QPushButton[name='btn'] 匹配所有name属性为btn的QPushButton实例
QPushButton[name~='btn'] ~=匹配所有name属性中包含btn的QPushButton实例
.QPushButton 匹配所有QPushButton实例,但不匹配其子类。等同于*[class~="QPushButton"]
QComboBox#cb 匹配所有objectName为cb的QComboBox实例
QGroupBox QLabel {color: blue} 把所有包含在QGroupBox中的QLabel控件的文本颜色设为蓝色(无论直接包含还是间接包含)
QGroupBox > QLabel {font: 30px} 把所有QGroupBox直接包含的QLabel文本字体大小设为30px
有些小伙伴可能就问了:* {color: red} 明明这条样式是让所有的文本颜色变为红色,但是有些控件的文本并没有根据这条来,为什么?
这里就涉及到一个“具体与笼统”的概念,当选择器写的越具体,选择器的优先程度越高。通配符*这一选择器写法非常笼统,而之后几条样式的选择器都是指定了控件名称的,比通配符更加具体,所以优先度更高
属性:
color: red 前景色
background-color: green 背景色
font: bold 20px 字体
qss = 'QPushButton {color: red}' 单选择器单属性
qss ='QPushButton {color: red; background-color: blue}' 单选择器多属性
qss = 'QPushButton, QLabel, QLineEdit {color: red}' 多选择器
子控件
了解下什么是子控件:我们知道QComboBox由一个矩形框和一个下拉按钮组成,而这个下拉按钮就是QComboBox的子控件了,PyQt5允许我们使用QSS对其进行样式化
1 import sys 2 from PyQt5.QtWidgets import QApplication, QComboBox,QWidget,QSpinBox 3 4 class Demo(QWidget): 5 def __init__(self): 6 super(Demo, self).__init__() 7 my_list = ['A', 'B', 'C', 'D'] 8 self.cbox=QComboBox(self) 9 self.cbox.addItems(my_list) 10 self.sp=QSpinBox(self) 11 self.sp.move(0,50) 12 13 14 if __name__ == '__main__': 15 app = QApplication(sys.argv) 16 demo = Demo() 17 #qss = 'QComboBox::drop-down {image: url(D:\ss\ssss\images\3.png)}' 18 # 更换QComboBox子控件的下拉按钮图片 19 20 qss='QSpinBox::up-button {image: url(D:/ss/ssss/images/up.png)}' \ 21 'QSpinBox::down-button {image: url(D:/ss/ssss/images/down.png)}' 22 #更换QSpinBox子控件的上下按钮图片 23 demo.setStyleSheet(qss) 24 demo.show() 25 sys.exit(app.exec_())