0


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

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

QSS的语法规则

  1. QSS 的语法规则几乎与 CSS 相同,如果对 CSS 比较了解的话,那么 QSS 的使用就不会有什么问题。
  2. QSS 样式由两部分组成,其中一部分是选择器,指定哪些控件会受到影响;另一部分是声明,指定哪些属性应该在控件上进行设置。声明部分是一系列的“属性:值”对,使用英文分号(;)分隔各个不同的属性对,使用大括号({})将所有的声明包括在内。
  3. 示例:
  1. QPushButton {
  2. color: red
  3. }
  1. 熟悉 CSS 的看到这样的表示方式应该不陌生,表示将 QPushButton 的前景色设置为红色。从 CSS 来看,这样理解没有什么问题,但是 QSS 这里是不一样的,QPushButton 表示的是PyQt中的按钮类,而非 CSS 中的标签含义,既然含义不一样了,那么上面的样式也多少会有区别。它代表的意义是:QPushButton 类及其子类的所有实例的前景色是红色。需要注意的是,凡是继承 QPushButton 的子类都会受到影响。

QSS选择器类型

  1. 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,只包括直接的。

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

在代码中设置QSS

  1. 上面完成了对QSS常用内容的说明,接下来看一下如何在代码中设置QSS。使用的方式也很简单,调用 QWidget 的成员函数 setStyleSheet(QSS格式字符串) 即可完成设置。
  2. 代码示例:
  1. import typing
  2. from PyQt5 import QtCore
  3. from PyQt5.QtWidgets import *
  4. import sys
  5. from PyQt5.QtWidgets import QWidget
  6. # 使用代码方式设计页面,以便代码演示
  7. class QssDemo(QWidget):
  8. def __init__(self):
  9. super().__init__()
  10. # 创建 QPushButton 实例
  11. btn = QPushButton(self)
  12. # 设置按钮显示文字
  13. btn.setText("QSS展示按钮")
  14. # 设置 objectName 为 btn
  15. btn.setObjectName("btn")
  16. self.setWindowTitle("QSS样式使用示例")
  17. if __name__ == "__main__":
  18. app = QApplication(sys.argv)
  19. win = QssDemo()
  20. # QSS样式字符串
  21. qssStr = """
  22. #btn {
  23. width: 200;
  24. height: 100;
  25. color: red;
  26. }
  27. """
  28. win.setStyleSheet(qssStr)
  29. win.show()
  30. sys.exit(app.exec_())

  1. 以上的代码示例应该不难理解,不过这个代码有些问题,问题是我们把QSS的样式以编码的方式写在了代码中,不方便以后的维护。
  2. 发现问题,解决问题。可以将QSS样式内容编写进以后缀名 .qss 命名的文件,然后再在程序中读取加载该文件内容就可以完成代码和QSS样式相分离的目的。
  3. 对上面示例代码进行改造。新建 test.qss 样式文件,将上面示例代码中的 QSS 内容放入该文件中。
  1. #btn {
  2. width: 200;
  3. height: 100;
  4. color: red;
  5. }
  1. 接下来将上面示例代码入口处设置QSS样式的方式改为从QSS文件加载。此处仅展示不一样的代码部分。
  1. if __name__ == "__main__":
  2. app = QApplication(sys.argv)
  3. win = QssDemo()
  4. # 加载 QSS 样式文件 test.qss
  5. with open("test.qss", "r") as f:
  6. qssStr = f.read()
  7. win.setStyleSheet(qssStr)
  8. win.show()
  9. sys.exit(app.exec_())
  1. 这里只是对QSS做了一个简短的介绍,具体内容可以查看官方文档:Qt Style Sheets Qt for Python
标签: qt ui python

本文转载自: https://blog.csdn.net/zorro_z/article/details/134426420
版权归原作者 zorro_z 所有, 如有侵权,请联系我们删除。

“使用PyQT5开发桌面应用--QSS的UI美化”的评论:

还没有评论