使用PyQT5开发桌面应用--QSS的UI美化

        QSS（Qt Style Sheets）即 Qt 样式表，是用来定义控件外观的一种机制。QSS 大量参考了 CSS 的内容，和 CSS 的使用相类似，但功能要比 CSS 弱的多。主要体现为选择器少，可用的属性也少，并且不是所有的属性都可以应用在 PyQt 的控件上。但是 QSS 可以使页面和美化代码分开，利用维护，也给我们提供了页面美化的方案。

QSS的语法规则

        QSS 的语法规则几乎与 CSS 相同，如果对 CSS 比较了解的话，那么 QSS 的使用就不会有什么问题。

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

        示例：

QPushButton {
    color: red
}

        熟悉 CSS 的看到这样的表示方式应该不陌生，表示将 QPushButton 的前景色设置为红色。从 CSS 来看，这样理解没有什么问题，但是 QSS 这里是不一样的，QPushButton 表示的是PyQt中的按钮类，而非 CSS 中的标签含义，既然含义不一样了，那么上面的样式也多少会有区别。它代表的意义是：QPushButton 类及其子类的所有实例的前景色是红色。需要注意的是，凡是继承 QPushButton 的子类都会受到影响。

QSS选择器类型

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

1. 通配选择器：*，匹配所有的控件。
2. 类型选择器：写入需要匹配的控件类型名称，如：QPushButton，匹配所有的 QPushButton 类及其子类的实例。
3. 属性选择器：控件类型[属性名=属性值]，如：QPushButton[name="btn"]，匹配所有 name 属性是 btn 的 QPushButton 实例。这里的属性是可以自定义的，这与HTML自定义属性的概念一样，不一定非要用类本身具有的属性。
4. 类选择器：.控件类型，如：.QPushButton，匹配所有 QPushButton 实例，但是并不匹配其子类。
5. ID选择器：#对象名称，如：#btn，匹配所有 ID 为 btn 的控件，这里的 ID 实际上是控件的 objectName 的值，这是需要注意的地方。
6. 后代选择器：控件类型1 控件类型2，如：QDialog QPushButton，匹配所有 QDialog 容器中的 QPushButton，不管是直接的还是间接的。
7. 子选择器：控件类型1 > 控件类型2，如：QDialog > QPushButton，匹配所有的 QDialog 容器中的 QPushButton，只包括直接的。

        以上所有的选择器可以联合使用，并且支持一次设置多种类型选择器，用英文逗号隔开，这与 CSS 的使用基本上是一样的。

在代码中设置QSS

        上面完成了对QSS常用内容的说明，接下来看一下如何在代码中设置QSS。使用的方式也很简单，调用 QWidget 的成员函数 setStyleSheet(QSS格式字符串) 即可完成设置。

        代码示例：

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

from PyQt5.QtWidgets import QWidget

# 使用代码方式设计页面，以便代码演示
class QssDemo(QWidget):
    def __init__(self):
        super().__init__()

        # 创建 QPushButton 实例
        btn = QPushButton(self)
        # 设置按钮显示文字
        btn.setText("QSS展示按钮")
        # 设置 objectName 为 btn
        btn.setObjectName("btn")

        self.setWindowTitle("QSS样式使用示例")


if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = QssDemo()

    # QSS样式字符串
    qssStr = """
        #btn {
            width: 200;
            height: 100;
            color: red;
        }
    """
    win.setStyleSheet(qssStr)

    win.show()
    sys.exit(app.exec_())

 

        以上的代码示例应该不难理解，不过这个代码有些问题，问题是我们把QSS的样式以编码的方式写在了代码中，不方便以后的维护。

        发现问题，解决问题。可以将QSS样式内容编写进以后缀名 .qss 命名的文件，然后再在程序中读取加载该文件内容就可以完成代码和QSS样式相分离的目的。

        对上面示例代码进行改造。新建 test.qss 样式文件，将上面示例代码中的 QSS 内容放入该文件中。

#btn {
    width: 200;
    height: 100;
    color: red;
}

        接下来将上面示例代码入口处设置QSS样式的方式改为从QSS文件加载。此处仅展示不一样的代码部分。

if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = QssDemo()

    # 加载 QSS 样式文件 test.qss
    with open("test.qss", "r") as f:
        qssStr = f.read()
        win.setStyleSheet(qssStr)

    win.show()
    sys.exit(app.exec_())

        这里只是对QSS做了一个简短的介绍，具体内容可以查看官方文档：Qt Style Sheets — Qt for Python。