PyQt5 系统化学习: QSS的UI美化

您所在的位置:网站首页 xp框架美化模块怎么用 PyQt5 系统化学习: QSS的UI美化

PyQt5 系统化学习: QSS的UI美化

2024-07-17 06:49| 来源: 网络整理| 查看: 265

23 QSS 的 UI 美化

《PyQt5快速开发与实战》学习笔记。

QSS(Qt Style Sheets)即 Qt 样式表,是用来自定义控件外观的一种机制。QSS 大量参考了 CSS 的内容,但 QSS 的功能比 CSS 要弱得多,体现为选择器少,可以使用的 QSS 属性也少,并且并不是所有的属性都可以应用在 PyQt 的控件上。QSS 使页面美化跟代码层分开,利于维护。

23.1 QSS 的语法规则

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

QPushButton {color:red}

表示设置 QPushButton 类及其子类的所有实例的前景色是红色。其中,QPushButton 表示选择器,指定所有的 QPushButton 类及其子类都会受到影响。注意,凡是继承自 QPushButton 的子类都会受到影响,这是与 CSS 不同的地方,因为 CSS 应用的都是一些标签,没有类的层次结构,更没有子类的概念。{color:red} 则是规则的定义,表示指定前景色是红色。完整代码如下:

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 样式,窗口中按钮的背景色都为红色。首先定义了 QSS 样式,然后使用 win.setStyleSheet() 函数加载 QSS 样式,该函数可以对整个窗口进行样式设置,setStyleSheet() 函数本身是 QWidget 的成员函数,PyQt5 中的大多数控件都可以直接通过该函数来设置样式。

还可以使用多个选择器指定相关的声明,使用逗号将各个选择器分离,例如: QPushButton,QLineEdit,QComboBox { color: blue }

它相当于:

QPushButton { color: red } QLineEdit { color: red } QComboBox { color: red } 23.2 QSS 选择器类型

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

通配选择器:*,匹配所有的控件。 类型选择器:QPushButton,匹配所有的 QPushButton 类及其子类的实例。 属性选择器:QPushButton[name="myBtn"],匹配所有的 name 属性是 myBtn 的 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_())

效果如下:

类选择器:.QPushButton,匹配所有的 QPushButton 实例,但是并不匹配其子类。注意前面有一个点号,这是与 CSS 中的类选择器不一样的地方。 ID选择器:#myButton,匹配所有的 ID 为 myButton 的控件,这里的 ID 实际上就是 objectName 指定的值。 后代选择器:QDialog QPushButton,匹配所有的 QDialog 容器中包含的 QPushButton,不管是直接的还是间接的。 子选择器:QDialog>QPushButton,匹配所有的 QDialog 容器中包含的 QPushButton,其中要求 QPushButton 的直接父容器是 QDialog。

另外,上面所有的选择器可以联合使用,并且支持一次设置多种选择器类型,用逗号隔开。例如#frameCut,#frameInterrupt,#frameJoin,表示这些 ID 使用一个规则;#mytable QPushButton,表示选择所有 ID 为 mytable 的容器中包含的 QPushButton 控件。

23.3 QSS 子控件

QSS 子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如 QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉列表。例如:

QComboBox::drop-down { image: url(../Images/dropdown.png) }

上面的样式指定所有 QComboBox 的下拉箭头的图片是自定义的,图片文件为 dropdown.png。

::drop-down 子控件选择器可以与上面提到的选择器联合使用。例如:

QComboBox#myQComboBox::drop-down { image: url(../Images/dropdown.png) }

表示为指定 ID 为 myQComboBox 的 QComboBox 控件的下拉箭头自定义图片。需要注意的是,子控件选择器实际上是选择复合控件的一部分,也就是对复合控件的一部分应用样式,例如为 QComboBox 的下拉箭头指定图片,而不是为 QComboBox 本身指定图片。

from PyQt5.QtWidgets import * import sys class WindowDemo(QWidget): def __init__(self): super().__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_())

效果如下:

23.4 QSS 伪状态

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

QComboBox:hover{background-color:red;}

表示当鼠标指针经过 QComboBox 时,其背景色指定为红色,该伪状态 :hover 描述的是 QComboBox 的状态。除可以描述选择器所选择的控件外,伪状态还可以描述子控件选择器所选择的复合控件的子控件的状态。例如:

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

表示当鼠标指针经过 QComboBox 的下拉箭头时,该下拉箭头的背景色变成红色。

此外,伪状态还可以用一个感叹号来表示状态,例如 :hover 表示鼠标指针经过的状态,而 :!hover 表示鼠标指针没有经过的状态。多种伪状态可以同时使用,例如:

QCheckBox:hover:checked { color: white }

表示当鼠标指针经过一个选中的 QCheckBox 时,设置其文字的前景色为白色。

QSS 提供了很多伪状态,一些伪状态只能用在特定的控件上,具体有哪些伪状态,在 PyQt5 的帮助文档中有详细的列表。

23.5 QDarkStyleSheet

除自己编写 QSS 样式表外,网上还有很多质量很高的 QSS 样式表,比如 QDarkStyleSheet,它是一个用于 PyQt5 应用程序的深黑色样式表。可以从 GitHub上下载,地址是: https://github.com/ColinDuquesnoy/QDarkStyleSheet/tree/master/qdarkstyle



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3