QSS (Qt Style Sheets)即Qt样式表,是用来自定义控件外观的一种机制。QSS大量参考了CSS的内容,但QSS的功能比CSS要弱得多,体现为选择器少,可以使用的QSS属性也少,并且并不是所有的属性都可以应用在PyQt的控件上。QSS使页面美化跟代码层分开,利于维护。
QSS的语法规则
QSS的语法规则几乎与CSS相同。QSS样式由两部分组成,其中一部分是选择器(Selector),指定哪些控件会受到影响另一部分是声明(Declaration),指定哪些属性应该在控件上进行设置。声明部分是一系列的“属性:值”对,使用分号(;)分隔各个不同的属性值对,使用大括号({})将所有的声明包括在内。
代码示例
from PyQt5.QtWidgets import *
import sys
class WindowDemo(QWidget):
def __init__(self):
super().__init__()
btn1 = QPushButton(self)
btn1.setText('按钮1')
btn2 = QPushButton(self)
btn2.setText('按钮2')
vbox = QVBoxLayout()
vbox.addWidget(btn1)
vbox.addWidget(btn2)
self.setLayout(vbox)
self.setWindowTitle("QSS样式")
if __name__ == "__main__":
app = QApplication(sys.argv)
win = WindowDemo()
qssStyle = '''
QPushButton {
background-color: red
}
'''
win.setStyleSheet(qssStyle)
win.show()
sys.exit(app.exec_())
代码示例中首先定义了QSS样式,然后使用win.setStyleSheet()函数加载QSS样式,该函数可以对整个窗口进行样式设置,setStyleSheet()函数本身是QWidget的成员函数,PyQt中的大多数控件都可以直接通过该函数来设置样式。
QSS选择器类型
QSS选择器有如下几种类型。
(1)通配选择器:*,匹配所有的控件
(2)类型选择器:QPushButton,匹配所有的QPushButton类及其子类的实例。
(3)属性选择器:QPushButton[name="myBtn"],匹配所有的name属性是myBtn的QPushButton实例。注意,该属性可以是自定义的,不一定非得是类本身具有的属性。
(4)类选器:.QPushButton,匹配所有的QPushButton实例,但是并不匹配其子类。注意前面有一个点号,这是与CSS中的类选择器不一样的地方。
(5)ID选择器:#myButton,匹配所有的ID为myButton的控件,这里的ID实际上就是objectName指定的值。
(6)后代选择器:QDialog QPushButton,匹配所有的QDialog容器中包含的QPushButton,不管是直接的还是间接的。
(7)子选择器:QDialog>QPushButton,匹配所有的QDialog容器中包含的QPushButton,其中要求QPushButton的直接父容器是QDialog。
另外,上面所有的选择器可以联合使用,并且支持一次设置多种选择器类型,用逗号隔开。例如#frameCut,#frameInterrupt,#frameJoin,表示这些ID使用一个规则;#mytable QPushButton,表示选择所有ID为mytable的容器中包含的QPushButton控件。
代码示例
from PyQt5.QtWidgets import *
import sys
class WindowDemo(QWidget):
def __init__(self):
super().__init__()
btn1 = QPushButton(self)
btn1.setText('按钮1')
btn2 = QPushButton(self)
btn2.setProperty('name', 'myBtn')
btn2.setText('按钮2')
vbox = QVBoxLayout()
vbox.addWidget(btn1)
vbox.addWidget(btn2)
self.setLayout(vbox)
self.setWindowTitle("QSS样式")
if __name__ == "__main__":
app = QApplication(sys.argv)
win = WindowDemo()
qssStyle = '''
QPushButton[name="myBtn"] {
background-color: red
}
'''
win.setStyleSheet(qssStyle)
win.show()
sys.exit(app.exec_())
QSS子控件
QSS子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉列表。
代码示例
from PyQt5.QtWidgets import *
import sys
class WindowDemo(QWidget):
def __init__(self):
super(WindowDemo, self).__init__();
self.InitUI();
def InitUI(self):
combo = QComboBox(self)
combo.setObjectName('myQComboBox')
combo.addItem('Window')
combo.addItem('Ubuntu')
combo.addItem('Red Hat')
combo.move(50, 50)
self.setGeometry(250, 200, 320, 150)
self.setWindowTitle('QComboBox样式')
if __name__ == "__main__":
app = QApplication(sys.argv)
win = WindowDemo()
qssStyle = '''
QComboBox#myQComboBox::drop-down {
image: url( ./images/dropdown.png)
}
'''
win.setStyleSheet(qssStyle)
win.show()
sys.exit(app.exec_())
QSS伪状态
QSS伪状态选择器是以冒号开头的一个选择表达式,例如:hover,表示当鼠标指针经过时的状态。伪状态选择器限制了当控件处于某种状态时才可以使用QSS规则,伪状态只能描述一个控件或者一个复合控件的子控件的状态,所以它只能放在选择器的最后面。例如:
QComboBox:hover{background-color:red;}
此外,伪状态还可以用一个感叹号来表示状态,例如:hover表示鼠标指针经过的状态,而:hover表示鼠标指针没有经过的状态。多种伪状态可以同时使用,例如:
QCheckBox:hover:checked { color: white }
QDarkStyleSheet
https://github.com/ColinDuquesnoy/QDarkStyleSheet/tree/master/qdarkstyle
pip install qdarkstyle