主题
QSS - 美化 Qt 窗口
QSS 全称 QT Style Sheet， 是 QT 中用来定义样式的一种语言。
QSS 的语法几乎与 CSS 一致。
QSS 官方文档地址为 https://doc.qt.io/qt-6/stylesheet-reference.html 。
核心概念
QSS 主要包含三部分：
- 选择器：用于选择要应用样式的 Qt 小部件
- 属性：属性用于定义小部件的外观，如颜色、边框、字体
- 伪类：根据小部件的状态应用特定样式，如悬停、按下、禁用等状态
写法上还有一些注意点：
- 继承与层叠：样式可以被子小部件继承，多重样式可叠加应用
- 样式优先级：样式应用顺序和特异性决定最终显示效果
标准写法为：
css
选择器 { /* 选择器表示这个样式针对什么对象生效 */
属性类型: 属性值;
}如：
css
/* 案例 */
QPushButton { /* 针对按钮 */
background-color: #4CAF50; /* 按钮背景颜色为绿色 */
color: white; /* 按钮文字颜色为白色 */
border-radius: 8px; /* 圆角半径为8像素 */
padding: 8px 16px; /* 内边距，上下8像素，左右16像素 */
font-size: 14px; /* 字体大小为14像素 */
}不同部件还可以设置不同的样式，如给两个不同的按钮设置样式：
css
QPushButton#button1 {
background-color: #4CAF50;
}
QPushButton#button2 {
background-color: #FF0000;
}这两个按钮的 id 分别为 button1 和 button2，可通过以下代码设置：
python
button1.setObjectName("button1")
button2.setObjectName("button2")每个按钮也支持通过伪类设置不同状态下的样式：
css
/* 当鼠标悬停在按钮上时，改变按钮的背景颜色 */
QPushButton:hover {}
/* 当按钮被按下时，改变按钮的背景颜色 */
QPushButton:pressed {}
/* 当输入框获得焦点时，改变边框颜色 */
QLineEdit:focus {}总结一下：
css
// ID 选择器
submit_button = QPushButton("Submit")
submit_button.setObjectName("submitButton") # 设置 objectName 以用于 ID 选择器
// 元素选择器
line_edit = QLineEdit()
QLineEdit {
border: 2px solid gray;
}
// 属性选择器
submit_button = QPushButton("Submit") submit_button.setProperty("customStyle", "green")
QPushButton[customStyle="green"] {
//......
}
// 最常见的类型选择器
QCheckBox {
font-size: 14px;
}
// 伪类选择器 ：
QLabel:hover {
//........
}
// 组合选择器
QPushButton, QLabel {
font-size: 14px;
}使用
方式一：直接在代码里面注入 QSS 语法。
python
// 在代码里面写 Style
self.setWindowTitle("QSS Example")
self.setGeometry(100, 100, 400, 300)
button = QPushButton("Click Me", self)
button.setGeometry(100, 100, 200, 50)
# 设置 QSS 样式
self.setStyleSheet("""
QMainWindow {
background-color: #f0f0f0;
}
QPushButton {
background-color: lightblue;
color: white;
border-radius: 10px;
padding: 10px;
}
QPushButton:hover {
background-color: darkblue;
}
""")
// 还可以直接给组件设置 Style
button.setStyleSheet("""
QPushButton {
background-color: lightgreen;
}
""")方式二：引入 QSS 文件。
python
stylesheet_path = os.path.join(os.path.dirname(__file__), 'layout.qss')
self.load_stylesheet(stylesheet_path)
def load_stylesheet(self, filename):
with open(filename, "r", encoding="utf-8") as file:
self.setStyleSheet(file.read())layout.qss 就是我们要创建的 QSS 文件，PyCharm 支持自动补全，需要下载插件 QSSEditor 。
除我们自己手写 QSS，Github 上开源了许多优秀的主题样式，如：
shell
pip install qdarkstylepython
import qdarkstyle
// 也可以加载不同的样式 ，具体可以看官网
app = QApplication(sys.argv)
dark_stylesheet = qdarkstyle.load_stylesheet_pyqt6()
app.setStyleSheet(dark_stylesheet)常用样式
一、通用属性
通用属性适用于大多数控件，控制颜色、大小、布局、边距等。之前有提到一些，下面是完整的通用属性列表：
- color：文字颜色
- 例：
color: #000000;
- 例：
- background-color：背景颜色
- 例：
background-color: #FFFFFF;
- 例：
- border：边框属性
- 语法：
border: <宽度> <样式> <颜色>; - 例：
border: 1px solid #000;
- 语法：
- border-radius：圆角边框
- 例：
border-radius: 5px;
- 例：
- padding：内部边距
- 例：
padding: 10px;
- 例：
- margin：外部边距
- 例：
margin: 5px;
- 例：
- font：字体
- 例：
font: bold 14px Arial;
- 例：
- font-family：字体系列
- 例：
font-family: "Times New Roman";
- 例：
- font-size：字体大小
- 例：
font-size: 12px;
- 例：
- font-style：字体样式
- 例：
font-style: italic;
- 例：
- font-weight：字体粗细
- 例：
font-weight: bold;或font-weight: 600;
- 例：
- text-align：文本对齐方式
- 例：
text-align: center;，可选值：left,right,center,justify
- 例：
- min-width / min-height：最小宽度/高度
- 例：
min-width: 100px;
- 例：
- max-width / max-height：最大宽度/高度
- 例：
max-width: 300px;
- 例：
- opacity：透明度
- 例：
opacity: 0.7;（值范围为 0 到 1）
- 例：
- qproperty-alignment：控件对齐方式
- 例：
qproperty-alignment: AlignCenter;
- 例：
- qproperty-text：用于设置文本
- 例：
qproperty-text: "Hello World!";
- 例：
- image：设置背景图片
- 例：
background-image: url("path/to/image.jpg");
- 例：
二、常用控件属性
下面列举一些常用控件的特有属性，通用属性将不再重复列出。
1. QMainWindow（主窗体）
- background-color：背景颜色
- 例：
background-color: #F0F0F0;
- 例：
- border-image：背景图像（拉伸/平铺方式设置窗体背景）
- 例：
border-image: url('background.png') 0 0 0 0 stretch stretch;
- 例：
- padding：设置内部边距
2. QPushButton（按钮）
- hover：鼠标悬停样式
- 例：
QPushButton:hover { background-color: #0078D7; }
- 例：
- pressed：按钮按下时的样式
- 例：
QPushButton:pressed { background-color: #005BB5; }
- 例：
- border-image：按钮背景图片
- 例：
border-image: url('button.png') 0 0 0 0 stretch stretch;
- 例：
3. QLineEdit（单行文本输入框）
- selection-background-color：文本选中时的背景颜色
- 例：
selection-background-color: #D08770;
- 例：
- selection-color：文本选中时的文字颜色
- 例：
selection-color: #FFFFFF;
- 例：
- placeholder-text：占位符文本颜色
- 例：
QLineEdit { qproperty-placeholderTextColor: #888888; }
- 例：
4. QSpinBox（数值选择框）
- up-button / down-button：上下调节按钮样式
- 例：
QSpinBox::up-button { width: 20px; height: 20px; background-color: #A3BE8C; }
- 例：
- up-arrow / down-arrow：上下调节按钮图标样式
- 例：
QSpinBox::up-arrow { image: url('up-arrow.png'); }
- 例：
- buttonSymbols：显示增减按钮
- 例：
QSpinBox { qproperty-buttonSymbols: UpDownArrows; }
- 例：
5. QLabel（文本标签）
- qproperty-alignment：文本对齐方式
- 例：
qproperty-alignment: AlignCenter;
- 例：
- qproperty-wordWrap：自动换行
- 例：
qproperty-wordWrap: true;
- 例：
6. QProgressBar（进度条）
- chunk：进度条的填充部分样式
- 例：
QProgressBar::chunk { background-color: #4CAF50; }
- 例：
- text-align：进度条文本对齐方式
- 例：
text-align: center;
- 例：
7. QScrollBar（滚动条）
- handle：滚动条的滑块样式
- 例：
QScrollBar::handle { background-color: #4C566A; border-radius: 4px; }
- 例：
- sub-line / add-line：滚动条两端的按钮样式
- 例：
QScrollBar::sub-line { background-color: #D08770; }
- 例：
8. QSlider（滑动条）
- groove：滑动条槽样式
- 例：
QSlider::groove:horizontal { height: 8px; background: #D8DEE9; }
- 例：
- handle：滑动条的滑块样式
- 例：
QSlider::handle:horizontal { width: 20px; background: #5E81AC; }
- 例：
9. QComboBox（下拉框）
- drop-down：下拉箭头样式
- 例：
QComboBox::drop-down { background-color: #A3BE8C; }
- 例：
- down-arrow：下拉框的箭头图标
- 例：
QComboBox::down-arrow { image: url('down-arrow.png'); }
- 例：
- item：下拉框内的选项样式
- 例：
QComboBox::item { background-color: #ECEFF4; }
- 例：
10. QMenu（菜单）
- separator：菜单分隔线样式
- 例：
QMenu::separator { height: 1px; background-color: #4C566A; }
- 例：
- item：菜单项样式
- 例：
QMenu::item { padding: 8px 24px; background-color: #3B4252; }
- 例：
- item：选中菜单项的样式
- 例：
QMenu::item:selected { background-color: #5E81AC; }
- 例：
三、布局相关属性
布局是Qt中的重要部分，用于控件的排列和对齐。
1. QVBoxLayout / QHBoxLayout
- spacing：控件之间的间距
- 例：
QVBoxLayout { spacing: 10px; }
- 例：
- margin：布局外边距
- 例：
QHBoxLayout { margin: 10px; }
- 例：
2. QGridLayout
row/column
：指定行或列的布局参数
- 例：
QGridLayout { row: 0; column: 1; }
- 例：