QT Widgets-qss使用

发表于 | 分类于
QT Widgets-qss使用

前言

Qt Style Sheets (QSS) 支持许多与 CSS 类似的样式设置，用于自定义 Qt 控件的外观。

QSS样式

以下是 QSS 支持的一些主要样式设置及其属性：

1. 文本样式

  • color: 文本颜色
  • font-family: 字体系列
  • font-size: 字体大小
  • font-style: 字体样式（如 italic）
  • font-weight: 字体粗细（如 bold）
  • text-align: 文本对齐（如 left, center, right）
  • text-decoration: 文本装饰（如 underline, overline, line-through）

2. 背景样式

  • background-color: 背景颜色
  • background-image: 背景图片
  • background-repeat: 背景图片的重复方式（如 repeat, repeat-x, repeat-y, no-repeat）
  • background-position: 背景图片的位置（如 top left, center center）
  • background-clip: 背景裁剪区域（如 border-box, padding-box, content-box）
  • background-origin: 背景起始位置（如 border-box, padding-box, content-box）

3. 边框样式

  • border: 边框（可以合并 border-width, border-style, border-color）
  • border-width: 边框宽度
  • border-style: 边框样式（如 solid, dashed, dotted）
  • border-color: 边框颜色
  • border-radius: 边框圆角

4. 尺寸和布局

  • width: 宽度
  • height: 高度
  • min-width: 最小宽度
  • min-height: 最小高度
  • max-width: 最大宽度
  • max-height: 最大高度
  • padding: 内边距
  • margin: 外边距

5. 边距和填充

  • padding-top: 上内边距
  • padding-right: 右内边距
  • padding-bottom: 下内边距
  • padding-left: 左内边距
  • margin-top: 上外边距
  • margin-right: 右外边距
  • margin-bottom: 下外边距
  • margin-left: 左外边距

6. 定位

  • position: 定位方式（如 absolute, relative, fixed）
  • top: 顶部定位
  • right: 右侧定位
  • bottom: 底部定位
  • left: 左侧定位

7. 阴影

  • box-shadow: 盒子阴影

8. 透明度

  • opacity: 透明度（0到1之间的值）

9. 过渡和动画

  • transition: 过渡效果
  • animation: 动画效果

10. 伪状态

  • :hover: 鼠标悬停
  • :pressed: 控件被按下
  • :checked: 控件被选中（如复选框或单选按钮）
  • :focus: 控件获得焦点
  • :disabled: 控件被禁用
  • :enabled: 控件被启用

示例

以下是一个 QSS 示例，展示了如何使用上述样式设置来自定义一个按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
QPushButton {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: 2px solid #4CAF50; /* 绿色边框 */
    border-radius: 5px; /* 圆角 */
    padding: 10px 20px; /* 内边距 */
    font-family: "Arial"; /* 字体 */
    font-size: 14px; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    transition: background-color 0.3s, border-color 0.3s; /* 过渡效果 */
}

QPushButton:hover {
    background-color: #45a049; /* 悬停时颜色变深 */
    border-color: #45a049; /* 悬停时边框颜色变深 */
}

QPushButton:pressed {
    background-color: #3e8e41; /* 按下时颜色更深 */
    border-color: #3e8e41; /* 按下时边框颜色更深 */
}

通过这些样式设置，你可以灵活地自定义 Qt 控件的外观，以满足应用程序的设计需求。

样式文件

定义样式文件 qss/common.qss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 全局样式 */
QWidget {
    background-color: #ffffff;
}

QPushButton {
    background-color: #4CAF50;
    color: white;
    border: 2px solid #4CAF50;
    border-radius: 5px;
    padding: 10px 20px;
    font-family: 'Arial';
    font-size: 14px;
    font-weight: bold;
}

QPushButton:hover {
    background-color: #45a049;
    border-color: #45a049;
}

QPushButton:pressed {
    background-color: #3e8e41;
    border-color: #3e8e41;
}

/* 特定页面的样式 */
#mainWindow QPushButton {
    background-color: #FF5733;
    border: 2px solid #FF5733;
}

#mainWindow QPushButton:hover {
    background-color: #C70039;
    border-color: #C70039;
}

#mainWindow QPushButton:pressed {
    background-color: #900C3F;
    border-color: #900C3F;
}

引用前生成Python文件

1
2
import subprocess
subprocess.run(['pyside2-rcc', 'resources.qrc', '-o', 'resources_rc.py'])

代码中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# This Python file uses the following encoding: utf-8
import sys
from PySide2.QtWidgets import QApplication, QWidget
from PySide2 import QtCore, QtGui, QtWidgets
from PySide2.QtUiTools import QUiLoader
from ui_form import Ui_Widget
import resources_rc

class Widget(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = QUiLoader().load(':/form.ui')
        print(self.ui)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    # 读取资源文件中的 QSS 文件
    qss_file = QtCore.QFile(":/qss/common.qss")
    if qss_file.open(QtCore.QFile.ReadOnly | QtCore.QFile.Text):
        qss_style = qss_file.readAll()
        qss_style = str(qss_style, encoding='utf-8')
        qss_file.close()

    # 设置全局样式表
    app.setStyleSheet(qss_style)

    widget = Widget()
    widget.ui.show()
    sys.exit(app.exec_())