1.QSS简介
在PyQt5中，QSS（Qt Style Sheets）用于定义和修改应用程序中的外观样式的技术。类似于网页开发中的CSS（Cascading Style Sheets），QSS专门用于Qt应用的控件和窗口外观的样式化。
2.QSS基础概念
- QSS 全称：Qt Style Sheets，类似于 CSS，用于控制 Qt 应用程序的界面样式。
- 作用范围：QSS 可以应用到整个应用程序、特定窗口或特定控件。
- 语法相似性：QSS 的语法与 CSS 非常相似，但比CSS要简单，属性可参考CSS。
3.QSS选择器类型
- 类选择器：按控件类名选择，例如QPushButton、QLabel。
- ID选择器：通过控件的setObjectName方法设置控件的ID，label.setObjectName('mylabel')，例如#mylabel。
- 属性选择器：通过控件属性选择，如QPushButton['name'='mybutton']。
- 通配选择器：* 可以匹配所有控件，通常用于全局样式。
4.伪状态选择器
- :hover：鼠标悬停在控件上。
- :pressed：控件被点击时。
- :checked：用于QCheckBox和QRadioButton，当控件被选中时。
- :disabled：控件被禁用时。
- :focus：控件获得焦点时。
- :selected：在QListView或QComboBox等控件中被选中项的状态。
5.QSS 作用范围
- 全局应用： 使用QApplication.setStyleSheet()方法将样式表应用到整个应用程序。
- 局部应用： 可以将样式表应用于特定控件，使用setStyleSheet()方法针对某个控件。
6.QSS属性
QSS 中的常用属性大部分与 CSS 类似，但针对 Qt 控件有部分特定的属性：
- 背景色和前景色：
- background-color：设置控件的背景颜色。
- color：设置控件文本的颜色。
- 边框和圆角：
- border：设置边框属性，如宽度、样式和颜色。
- border-radius：设置边框的圆角效果。
- 字体：
- font-size：设置字体大小。
- font-family：设置字体系列。
- font-weight：设置字体粗细。
- 内外边距：
- margin：设置控件的外边距。
- padding：设置控件的内边距。
- 大小：
- min-width、min-height：设置控件的最小宽度和高度。
- max-width、max-height：设置控件的最大宽度和高度。
7.QSS文件分离案例
QSS文件可以用来集中管理应用程序的样式，并且与代码分离，使得样式定义更加整洁和易于维护
Bash
import sys
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout, QLabel
class QSSLoad:
# 加载外部qss样式文件
@staticmethod
def read_qss_file(qss_file):
with open(qss_file, 'r', encoding='utf-8') as f:
return f.read()
class QSSDemo(QWidget):
def __init__(self):
super().__init__()
self.resize(600, 400)
self.setWindowTitle('QSS演示')
v_layout = QVBoxLayout(self)
btn1 = QPushButton('btn1')
btn2 = QPushButton('btn2')
btn3 = QPushButton('btn3')
label1 = QLabel('label-1')
label1.setObjectName('label-1')
v_layout.addWidget(btn1)
v_layout.addWidget(btn2)
v_layout.addWidget(btn3)
v_layout.addWidget(label1)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = QSSDemo()
# 加载qss样式文件
qs = QSSLoad.read_qss_file('QSSDemo.qss')
# 应用qss
w.setStyleSheet(qs)
w.show()
app.exec()
QSSDemo.qss
Bash
QPushButton{
background-color: blue;
color: white;
}
#label-1{
color: red;
}8.QSS内嵌样式案例
import sys
from PyQt5.QtWidgets import QApplication, QPushButton, QWidget, QVBoxLayout, QLabel
class QSSDemo(QWidget):
def __init__(self):
super().__init__()
self.resize(600, 400)
self.setWindowTitle('QSS演示')
v_layout = QVBoxLayout(self)
btn1 = QPushButton('btn1')
# 针对控件直接编写样式
btn1.setStyleSheet('QPushButton{color: white;background-color: blue;}')
btn2 = QPushButton('btn2')
btn3 = QPushButton('btn3')
label1 = QLabel('label-1')
label1.setObjectName('label-1')
label1.setStyleSheet('#label-1{color: red}')
v_layout.addWidget(btn1)
v_layout.addWidget(btn2)
v_layout.addWidget(btn3)
v_layout.addWidget(label1)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = QSSDemo()
w.show()
app.exec()
