PyQt5 QSS详解

一、什么是QSS

Qt样式表(QSS) 是一种针对 Qt 库的另外一种语言，它允许用户为 Qt 程序自定义其样式。QSS 是由 CSS 2.1 规范实现的一种层级样式表语言，Qt 类可以通过 QSS 控制其样式，从而定义它们的外观和行为。QSS 继承了 CSS 2.1 规范的所有特性，并增加了一些面向 Qt 类的子集。因此，如果你熟悉 CSS，你就可以很快地学会 QSS。

二、如何使用QSS

QSS 可以用代码、样式表文件或者 qss 文件来设置。代码设置的方式如下：

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

app = QApplication([])
win = QWidget()
style = """
    QWidget{
        background-color: #333;
    }
"""
win.setStyleSheet(style)
win.show()
app.exec_()

其中，setStyleSheet() 函数就是用来设置样式的。将要设置的样式定义在 style 变量中，再调用 setStyleSheet() 函数设置即可。

样式表文件的使用方法：

#样式文件（style.qss）
QWidget{
    background-color: #333;
}

#主程序
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

app = QApplication([])
win = QWidget()
win.setStyleSheet(open("style.qss","r").read())
win.show()
app.exec_()

注意: 路径可以根据实际情况进行更改。

三、QSS基本功能

1. 控件类型

QSS 可以针对不同的控件类型设置不同样式。其中有一些常用的控件类型:

• QWidget
• QLabel
• QPushButton
• QCheckBox
• QRadioButton
• QGroupBox
• QLineEdit
• QTextEdit

下面是一个利用 QSS 设置控件的背景颜色的示例：

#设定类型为 QPushButton 的背景颜色 
QPushButton{
    background-color: #cfcfcf;
}

2. 其它属性

控件类型的属性可以在 QSS 中进行设置，比如 background-color、color、font-size、padding 等等。

下面是一个利用 QSS 设置 QPushButton 的边框样式的示例：

#设置按钮外边框样式 
QPushButton{
    border: 3px solid #222;
    border-radius: 5px;
}

3. 伪状态(Pseudo-States)

在Qt中有三个常用的伪状态：checked、hover、disabled。

下面是一个 QCheckBox 的示例：

#设置QCheckBox处于未勾选时的样式
QCheckBox{
    background-color: #444;
    color: #fff;
}

#设置QCheckBox处于勾选时的样式 
QCheckBox:checked{
    background-color: #222;
    color: #fff;
}

四、QSS实战用例

1. 制作勾选框样式

QCheckBox{
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
}

QCheckBox::indicator{
    width: 20px;
    height: 20px;
}

QCheckBox::indicator::unchecked{
    image: url(:/unchecked.png);
}

QCheckBox::indicator::checked{
    image: url(:/checked.png);
}

2. 制作按钮样式

QPushButton{
    background: white;
    border: 3px solid #222;
    color: #222;
    font-size: 20px;
    padding: 5px;
    border-radius: 5px;
    min-width: 100px;
} 

QPushButton:hover{
    background: #222;
    color: #fff;
}

3. 制作滚动条样式

先定义滚动条的样式：

QScrollBar:vertical {
    background:#fff;
    width:16px;
    margin:0px 0px 0px 0px;
    border: 1px solid #ddd;
    padding-left:1px;
}
 
QScrollBar::handle:vertical {
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ccc, stop:0.5 #aaa, stop:1 #ccc);
    min-height: 0px;
    border-radius: 8px;
}
 
QScrollBar::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QScrollBar::sub-line:vertical {
    height: 0 px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
 
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background:#f2f2f2;
}

然后使用样式表将其应用于需要使用的控件中：

#应用样式
QTreeView::verticalScrollBar{
    background-color: #fff;
    width: 16px;
    margin: 0px 0px 0px 0px;
    border: 1px solid #ddd;
}
 
QTreeView::handle:vertical {
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ccc, stop:0.5 #aaa, stop:1 #ccc);
    min-height: 0px;
    border-radius: 8px;
}
 
QTreeView::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QTreeView::sub-line:vertical {
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
 
QTreeView::add-page:vertical,QTreeView::sub-page:vertical {
    background-color: #f2f2f2;
}

五、总结

本文通过不同方面的示例，详细阐述了 PyQt5 QSS 的基本用法，让读者更好的掌握如何使用 QSS 对 PyQt5 应用进行样式定制。希望读者在实践中，可以对 QSS 的使用更加熟练，并且可以根据自己的需求，制作出更加自己喜欢的应用风格。