PYQT5(25)-图形和特效-QSS的UI美化

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_())

PYQT5(25)-图形和特效-QSS的UI美化

代码示例中首先定义了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_())

PYQT5(25)-图形和特效-QSS的UI美化

 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_())

PYQT5(25)-图形和特效-QSS的UI美化

 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

上一篇:PyQt5最全95 窗口之QSS基础超细


下一篇:qt小项目三 代码实现简易的QQ聊天界面的对话框弹出功能