PySide6从0开始学习的笔记（十） 样式表(QSS)

PySide6 的样式表（Qt Style Sheets，QSS）是模仿 CSS 语法的界面美化机制，用于统一控制 PySide6 控件的外观，从基础的颜色、字体到复杂的控件状态、自定义控件样式都能覆盖。

一、QSS 基础核心

1.1 基本语法结构

QSS 语法与 CSS 高度相似，核心结构为：选择器 { 属性: 值; }，多个属性用分号分隔，注释用/* 注释内容 */。

from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout app = QApplication([]) window = QWidget() window.setWindowTitle("QSS基础示例") # 直接给控件设置QSS btn1 = QPushButton("按钮1") btn2 = QPushButton("按钮2") layout = QVBoxLayout(window) layout.addWidget(btn1) layout.addWidget(btn2) btn1.setStyleSheet(""" QPushButton { background-color: #4CAF50; /* 背景色 */ color: white; /* 文字色 */ font-size: 14px; /* 字体大小 */ padding: 8px 16px; /* 内边距（上下 左右） */ border: none; /* 无边框 */ border-radius: 4px; /* 圆角 */ } QPushButton:hover { background-color: #3e8e41; /* 鼠标悬停时背景色 */ } QPushButton:pressed { background-color: #297937; /* 鼠标按下时背景色 */ } """) window.resize(300, 200) window.show() app.exec()

按钮1是设置了样式表的，按钮2是没有设置样式表。

1.2 核心选择器

在上例中，为按钮1单独设置了样式表，如果有很多相同的按钮，为每个按钮单独设置样式表就很繁琐，所以就要用到选择器来选择样式表的设置范围。

代码：

from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout app = QApplication([]) window = QWidget() window.setWindowTitle("QSS基础示例") # 直接给控件设置QSS btn1 = QPushButton("按钮1") btn2 = QPushButton("按钮2") layout = QVBoxLayout(window) layout.addWidget(btn1) layout.addWidget(btn2) window.setStyleSheet(""" QMainWindow { /*设置主窗口*/ background-color: #f0f0f0; } QPushButton { /*设置窗口下的所有按钮*/ background-color: #2196F3; color: white; border-radius: 5px; padding: 10px; } QPushButton:hover { /*设置窗口下的所有按钮鼠标覆盖*/ background-color: #1860a0; } QPushButton:pressed { /*设置窗口下的所有按钮鼠标点击*/ background-color: #123654; } """) window.resize(300, 200) window.show() app.exec()

在上面的代码中，在窗口中通过类选择器的方法为所有按钮类定义了样式：

QPushButton { /*设置窗口下的所有按钮*/ background-color: #2196F3; color: white; border-radius: 5px; padding: 10px; }

又通过伪状态选择器定义了按钮的悬浮和点击样式：

QPushButton:hover { /*设置窗口下的所有按钮鼠标覆盖*/ background-color: #1860a0; } QPushButton:pressed { /*设置窗口下的所有按钮鼠标点击*/ background-color: #123654; }

除了类选择器和伪状态选择器，QSS 还支持以下常用选择器（优先级从高到低）：

示例：多选择器组合

import sys from PySide6.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout app = QApplication([]) window = QWidget() window.setWindowTitle("QSS基础示例") # 直接给控件设置QSS btn1 = QPushButton("按钮1") btn2 = QPushButton("按钮2") btn3 = QPushButton("按钮3") btn2.setObjectName("btn2") # 设置对象名称 btn3.setFlat(True) # 设置flat属性 layout = QVBoxLayout(window) layout.addWidget(btn1) layout.addWidget(btn2) layout.addWidget(btn3) window.setStyleSheet(""" QMainWindow { /*设置主窗口*/ background-color: #f0f0f0; } QPushButton { /*设置窗口下的所有按钮*/ background-color: #2196F3; color: white; border-radius: 5px; padding: 10px; } QPushButton:hover { /*设置窗口下的所有按钮鼠标覆盖*/ background-color: #1860a0; } QPushButton:pressed { /*设置窗口下的所有按钮鼠标点击*/ background-color: #123654; } QPushButton#btn2 { /*设置对象名称为btn2的按钮*/ background-color: #FF9800; } QPushButton#btn2:hover { /*设置对象名称为btn2的按钮鼠标覆盖*/ background-color: #e67e00; } QPushButton#btn2:pressed { /*设置对象名称为btn2的按钮鼠标点击*/ background-color: #b25c00; } QPushButton[flat=true] { /*设置flat属性为true的按钮*/ background-color: #ee6600; } QPushButton[flat=true]:hover { /*设置flat属性为true的按钮鼠标覆盖*/ background-color: #aa4400; } QPushButton[flat=true]:pressed { /*设置flat属性为true的按钮鼠标点击*/ background-color: #883300; } """) window.resize(300, 200) window.show() sys.exit(app.exec())

1.3 常用样式属性

QSS 覆盖控件的视觉属性，核心分类如下：

二、QSS 高级用法

2.1 状态伪选择器（复杂交互）

QSS 支持控件的各种状态（如悬浮、按下、选中、禁用等），可组合实现复杂交互效果，常用伪状态：

示例：自定义的复选框样式

import sys from PySide6.QtWidgets import QApplication, QWidget, QCheckBox, QVBoxLayout app = QApplication([]) window = QWidget() window.setStyleSheet(""" /* 1. 基础复选框样式（控制文字与框体间距） */ QCheckBox { font-size: 20px; spacing: 10px; /* 框体和文字的间距，避免重叠 */ } /* 2. 复选框框体（必选：设置宽/高） */ QCheckBox::indicator { width: 24px; /* 宽度 */ height: 24px; /* 高度 */ border: 2px solid #2196F3; /* 未选中边框 */ border-radius: 4px; /* 圆角（可选） */ background-color: white; /* 未选中背景 */ } /* 3. 选中态样式 */ QCheckBox::indicator:checked { background-color: #2196F3; } """) checkbox = QCheckBox("自定义复选框") layout = QVBoxLayout(window) layout.addWidget(checkbox) window.resize(300, 100) window.show() sys.exit(app.exec())

2.2 子控件选择器（精细化样式）

对于复合控件（如 QComboBox、QScrollBar、QSpinBox），需通过::子控件名定位内部子元素，实现精细化样式控制。常用子控件：

示例 1：自定义进度条

import sys from PySide6.QtWidgets import QTextEdit, QApplication, QWidget, QVBoxLayout app = QApplication(sys.argv) window = QWidget() from PySide6.QtWidgets import QProgressBar from PySide6.QtCore import QTimer progress = QProgressBar() progress.setRange(0, 100) progress.setValue(50) progress.setStyleSheet(""" QProgressBar { height: 8px; border-radius: 4px; background-color: #e0e0e0; text-align: center; /* 文字居中 */ color: transparent; /* 隐藏文字 */ } /* 进度条进度块 */ QProgressBar::chunk { border-radius: 4px; /* 渐变效果 */ background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #4CAF50, stop:1 #285825); } """) # 模拟进度变化 timer = QTimer() timer.timeout.connect(lambda: progress.setValue(progress.value() + 1 if progress.value() < 100 else 0)) timer.start(100) layout = QVBoxLayout(window) layout.addWidget(progress) window.show() sys.exit(app.exec())

2.3 动态样式切换（运行时修改）

通过代码动态修改 QSS，实现主题切换、状态变更等效果，核心方法：

1. 控件setStyleSheet()：直接覆盖控件样式
2. 全局样式表：QApplication.setStyleSheet()
3. 样式缓存：预定义多个样式字符串，按需切换

示例：明暗主题切换

import sys from PySide6.QtWidgets import QPushButton, QHBoxLayout, QApplication, QWidget, QVBoxLayout # 预定义主题 LIGHT_THEME = """ QWidget { background-color: #ffffff; color: #333333; } QPushButton { background-color: #2196F3; color: white; border-radius: 4px; padding: 8px; } QPushButton:hover { background-color: #1976D2; } """ DARK_THEME = """ QWidget { background-color: #212121; color: #ffffff; } QPushButton { background-color: #616161; color: white; border-radius: 4px; padding: 8px; } QPushButton:hover { background-color: #757575; } """ # 主题切换按钮 def switch_theme(): current = app.styleSheet() if current == LIGHT_THEME: app.setStyleSheet(DARK_THEME) else: app.setStyleSheet(LIGHT_THEME) # 初始化浅色主题 app = QApplication(sys.argv) window = QWidget() layout = QVBoxLayout(window) theme_btn = QPushButton("切换主题") theme_btn.clicked.connect(switch_theme) layout.addWidget(theme_btn) window.show() app.setStyleSheet(LIGHT_THEME) sys.exit(app.exec())

2.4 样式表继承与优先级

QSS 的优先级规则（高→低）：

1. 控件直接设置的样式（widget.setStyleSheet()） > 父控件 / 全局样式
2. ID 选择器 > 类选择器 > 通用选择器
3. 伪状态 / 子控件选择器 > 基础选择器
4. 后定义的样式覆盖先定义的同优先级样式

示例：优先级演示

# 全局样式（低优先级） app.setStyleSheet("QPushButton { background-color: gray; }") # 控件样式（高优先级） btn = QPushButton("优先级测试") # ID选择器（更高优先级） btn.setObjectName("priorityBtn") btn.setStyleSheet(""" QPushButton#priorityBtn { background-color: red; } /* 最终生效 */ QPushButton { background-color: blue; } """)

2.5 自定义控件的 QSS 支持

对于自定义控件（继承 QWidget），默认无法直接应用 QSS 背景等样式，需重写paintEvent或设置setAttribute(Qt.WA_StyledBackground, True)。

示例：支持 QSS 的自定义控件

import sys from PySide6.QtCore import Qt from PySide6.QtWidgets import QApplication from PySide6.QtWidgets import QWidget class CustomWidget(QWidget): def __init__(self, parent=None): super().__init__(parent) # 启用样式背景（关键） self.setAttribute(Qt.WA_StyledBackground, True) # 启用样式背景，必需的 app = QApplication(sys.argv) window = CustomWidget() window.setStyleSheet(""" CustomWidget { background-color: #ffeb3b; border: 2px solid #fbc02d; border-radius: 8px; padding: 16px; } CustomWidget:hover { background-color: #fff59d; } """) window.resize(300, 200) window.show() sys.exit(app.exec())

2.6 QSS 变量与动态值（进阶）

QSS 本身不支持变量，但可通过字符串格式化实现 “伪变量”，结合动态参数生成样式：

import sys from PySide6.QtWidgets import QApplication, QPushButton, QVBoxLayout from PySide6.QtWidgets import QWidget def get_button_style(bg_color, hover_color, radius): return f""" QPushButton {{ background-color: {bg_color}; border-radius: {radius}px; padding: 8px 16px; color: white; }} QPushButton:hover {{ background-color: {hover_color}; }} """ app = QApplication(sys.argv) window = QWidget() layout = QVBoxLayout(window) # 动态生成样式 btn_red = QPushButton("红色按钮") btn_red.setStyleSheet(get_button_style("#f44336", "#d32f2f", 4)) btn_blue = QPushButton("蓝色按钮") btn_blue.setStyleSheet(get_button_style("#2196F3", "#1976D2", 8)) layout.addWidget(btn_red) layout.addWidget(btn_blue) window.resize(300, 200) window.show() sys.exit(app.exec())

三、QSS 最佳实践

3.1 样式分离

将 QSS 写入单独的.qss文件，通过读取文件加载，便于维护：

# 加载外部QSS文件 def load_style_sheet(file_path): with open(file_path, "r", encoding="utf-8") as f: return f.read() # 应用样式 app.setStyleSheet(load_style_sheet("style.qss"))

3.2 避免过度样式化

• 优先使用系统原生样式作为基础，仅定制关键部分
• 避免为每个控件单独写样式，使用类选择器统一控制
• 复杂交互优先用代码逻辑，而非纯 QSS

3.3 调试技巧

• 使用Qt Style Sheet Debugger（Qt Creator 内置）调试 QSS
• 逐步添加样式，定位冲突的属性

四、总结

PySide6 的 QSS 是界面美化的核心工具，其核心能力包括：

1. 基础样式控制（颜色、字体、边框）
2. 状态与子控件的精细化样式
3. 运行时动态切换样式
4. 自定义控件的样式适配

高级用法的关键在于掌握选择器优先级、子控件定位、状态伪选择器，并结合 Python 代码实现动态样式逻辑。合理使用 QSS 可大幅提升界面美观度，同时保持代码的可维护性。