用python详细解说QT与qss使用

详细讲解如何在 Python 中使用 Qt 和 QSS（Qt Style Sheets）来美化界面。

---

1. Qt 和 QSS 简介

• Qt：跨平台的 C++ 图形用户界面框架，Python 中通过 PyQt5 或 PySide6 使用。
• QSS：类似 CSS 的样式表语言，用于定义 Qt 控件的样式（颜色、字体、边距等）。

---

2. 安装 PyQt5 或 PySide6

pip install pyqt5    # PyQt5
# 或
pip install pyside6  # PySide6（Qt官方Python绑定）

---

3. 基础窗口示例

# 使用 PyQt5
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout

app = QApplication([])
window = QWidget()
layout = QVBoxLayout()

button = QPushButton("点击我")
layout.addWidget(button)

window.setLayout(layout)
window.show()
app.exec_()

---

4. QSS 基本语法

4.1 选择器

• 控件类型选择器：QPushButton
• ID 选择器：QPushButton#myButton
• 类选择器：.warning（需在代码中设置 setProperty("class", "warning")）

4.2 属性

QPushButton {
    color: white;           /* 文本颜色 */
    background-color: #4CAF50; /* 背景颜色 */
    border: 2px solid #45a049; /* 边框 */
    border-radius: 5px;     /* 圆角 */
    padding: 10px;          /* 内边距 */
}

4.3 伪状态

QPushButton:hover { background-color: #45a049; }  /* 悬停 */
QPushButton:pressed { background-color: #367c39; } /* 按下 */

---

5. 应用 QSS 的三种方式

5.1 直接在代码中设置

button.setStyleSheet("""
    QPushButton {
        background-color: #4CAF50;
        color: white;
    }
    QPushButton:hover { background-color: #45a049; }
""")

5.2 全局样式表

app = QApplication([])
app.setStyleSheet("""
    QPushButton { 
        font-size: 16px;
        padding: 5px;
    }
""")

5.3 从文件加载 QSS

1. 创建 style.qss 文件：

   QWidget {
       background-color: #f0f0f0;
   }
   QPushButton {
       background-color: #4CAF50;
       color: white;
   }
   

2. 在 Python 中加载：

   with open("style.qss", "r") as f:
       app.setStyleSheet(f.read())
   

---

6. 复杂示例：美化多个控件

from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton, 
                             QLabel, QLineEdit, QVBoxLayout)

app = QApplication([])
app.setStyleSheet("""
    QWidget {
        background-color: #f0f0f0;
        font-family: Arial;
    }
    QPushButton {
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
        padding: 10px;
        min-width: 100px;
    }
    QPushButton:hover { background-color: #45a049; }
    QPushButton:pressed { background-color: #367c39; }
    QLineEdit {
        padding: 8px;
        border: 2px solid #ccc;
        border-radius: 4px;
    }
    QLabel {
        color: #333;
        font-size: 14px;
    }
""")

window = QWidget()
layout = QVBoxLayout()

label = QLabel("用户名:")
line_edit = QLineEdit()
button = QPushButton("登录")

layout.addWidget(label)
layout.addWidget(line_edit)
layout.addWidget(button)

window.setLayout(layout)
window.show()
app.exec_()

---

7. 子控件样式

为复杂控件（如 QComboBox、QScrollBar）的子部件设置样式：

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: right top;
    width: 20px;
    border-left: 1px solid #ccc;
}

---

8. 注意事项

1. 优先级：直接设置的样式 > 全局样式。
2. 调试：如果样式未生效，检查拼写错误或使用 qApp.setStyleSheet() 全局覆盖。
3. 资源路径：使用图片时需用绝对路径或 Qt 资源系统（:/images/icon.png）。

---

9. 完整案例：暗黑主题

app.setStyleSheet("""
    QWidget {
        background-color: #2d2d2d;
        color: #ffffff;
    }
    QPushButton {
        background-color: #3c3c3c;
        border: 1px solid #555;
        padding: 5px;
    }
    QLineEdit {
        background-color: #404040;
        border: 1px solid #555;
    }
    QLabel {
        color: #a0a0a0;
    }
""")

---

10. 参考资料

• Qt官方QSS文档
• PyQt5官方文档

通过 QSS，你可以轻松实现专业级 UI 设计！