PyQt5之QSS的UI美观

PyQt5之QSS的UI美观

QSS（Qt Style Sheets）即Qt样式表，是用来自定义控件外观的一种机制。QSS大量参考了CSS的内容，但QSS的功能比CSS要弱的多，体现为选择器少，可以使用的QSS属性也少，并且并不是所有的属性都可以应用在PyQt的控件上。

一、QSS的语法规则

QSS的语法规则几乎与CSS相同。QSS样式由两部分组成，其中一部分是选择器（Selector），指定哪些控件会受到影响；另一部分是声明（Declaration），指定哪些属性应该在控件上进行设置。声明部分是一系列的“属性：值”对，使用分号（；）分隔各个不同的属性值对，使用大括号（{}）将所有的声明包括在内。

下面例子是将三个按钮的背景颜色设置为粉红色：

import sys
from PyQt5 import QtCore
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class Demo(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(320,200)
        self.setWindowTitle('QSS例子')
        self.btn1 = QPushButton('Button1')
        self.btn2 = QPushButton('Button2')
        self.btn3 = QPushButton('Button3')
        layout = QVBoxLayout(self)
        layout.addWidget(self.btn1)
        layout.addWidget(self.btn2)
        layout.addWidget(self.btn3)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Demo()
    #使用类型选择器
    qssStyle = '''
        QPushButton{
            background-color:pink;
        }
    '''
    form.setStyleSheet(qssStyle)
    form.show()
    sys.exit(app.exec_())

运行效果如下：

---

二、 QSS选择器类型

QSS选择器有如下几种类型：

1. 通配选择器：*，匹配所有的控件；
2. 类型选择器：如QPushButton，匹配所有的QPushButton类及其子类的实例；
3. 属性选择器：QPushButton[name=“myButton”]，匹配所有的name属性是myButton的QPushButton实例，该属性可以是自定义的；
4. 类选择器：.QPushButton，匹配所有的QPushButton实例，但是并不匹配其子类，注意前面有一个点号；
5. ID选择器：#myButton，匹配所有的ID为myButton的控件，可以通过setObjectName来设置ID值；
6. 后代选择器：QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton，不管间接还是直接；
7. 子选择器：QDialog > QPushButton，匹配所有的QDialog容器中包含的QPushButton，其中要求QPushButton的直接父容器是QDialog。

---

三、QSS子控件

下拉列表例子（将下拉列表旁边的下拉箭头改为自定义图片::drop-down）：

import sys
from PyQt5 import QtCore
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class Demo(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(320,200)
        self.setWindowTitle('QSS例子')
        box = QComboBox(self)
        box.setObjectName('box')
        box.addItem('Python')
        box.addItem('PyQt5')
        box.addItem('QSS')
        box.move(100,100)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Demo()
    #QSS子控件
    qssStyle = '''
        QComboBox#box::drop-down{
            image:url(python.jpg)
        }
    '''
    form.setStyleSheet(qssStyle)
    form.show()
    sys.exit(app.exec_())

运行效果如下：

---

四、QSS伪状态

QSS伪状态选择器是以冒号开头的一个选择表达式，例如 :hover，表示当鼠标指针经过时的状态。伪状态选择器限制了当控件处于某种状态时才可以使用QSS规则，伪状态只能描述一个控件或者一个复合控件的子控件的状态，所以它只能放在选择器的最后面。

当鼠标指针经过QComboBox时，其背景颜色为红色：

QComboBox::drop-down:hover{background-color:red;}

---

注：
除自己编写的QSS样式表外，需要的可以从https://github.com/ColinDuquesnoy/QDarkStyleSheet/tree/master/qdarkstyle下载QDarkStyleSheet。

安装命令：pip install qdarkstyle
使用时应先导入：import qdarkstyle