一. 前言
上一篇我们尝试了 PyQT6 的上手使用 ,这一篇来学习一下如何优化界面。
本文目标 :
- 熟悉 PyQT 的样式调整和美化
- 学习如何套用 Theme 快速使用样式
- 做一个样式不错的小应用
二. 关于 PyQT 的 QSS
2.1 QSS 简介
- QSS 全称 QT Style Sheet , 是 QT 中用来定义样式的一种语言
- QSS 的语法几乎与 CSS 一致 , 如果有前端基础 ,下面的常见用法可以跳过
2.2 QSS 常见用法一览
这里如果有一定的 CSS 基础 ,就可以跳过了 ,只是一个简单的 Demo :
👉 QSS 里面最重要的就是三个环节 :
- 选择器 :用于选择要应用样式的 Qt 小部件
- 属性 :属性用于定义小部件的外观,如颜色、边框、字体
- 伪类 : 根据小部件的状态应用特定样式,如悬停、按下、禁用等状态
👉 在写法上还有一些注意点:
- 继承与层叠:样式可以被子小部件继承,多重样式可叠加应用
- 样式优先级:样式应用顺序和特异性决定最终显示效果
一个标准用法 :
选择器 { /* 选择器表示这个样式针对什么对象生效 */
属性类型: 属性值;
}
/* 案例 */
QPushButton { /* 针对按钮 */
background-color: #4CAF50; /* 按钮背景颜色为绿色 */
color: white; /* 按钮文字颜色为白色 */
border-radius: 8px; /* 圆角半径为8像素 */
padding: 8px 16px; /* 内边距,上下8像素,左右16像素 */
font-size: 14px; /* 字体大小为14像素 */
}
互动行为
和 CSS 一样 ,QSS 也有 Hover 等互动行为可以使用 :
/* 当鼠标悬停在按钮上时,改变按钮的背景颜色 */
QPushButton:hover
/* 当按钮被按下时,改变按钮的背景颜色 */
QPushButton:pressed
/* 当输入框获得焦点时,改变边框颜色 */
QLineEdit:focus
一些常用的选择器和代码关系 :
// ID 选择器 : (没错 ,QT 组件也有 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;
}
2.3 PyQT 如何使用 QSS
方式一 : 直接在代码里面注入 QSS 语法
// 在代码里面写 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 文件
# 1. 先准备一个 QSS 文件 , 并且写入样式
-- 此处略
# 2. 引入 QSS 文件
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())
三. 快速使用 Themes 套用模板
Github 上面有大量的主题样式可以开箱即用 ,这里列举几个 :
pip install qdarkstyle
import qdarkstyle
// 也可以加载不同的样式 ,具体可以看官网
app = QApplication(sys.argv)
dark_stylesheet = qdarkstyle.load_stylesheet_pyqt6()
app.setStyleSheet(dark_stylesheet)
- 可以看到 ,效果还是不错的
一些好用的主题推荐 :
总结
主要精力在做一个小工具上面 ,整体文章都以学习教程为主 。
内容不会太复杂 ,也是自己的学习路线 ,供大家参考
最后的最后 ❤️❤️❤️👇👇👇
- 👈 欢迎关注 ,超200篇优质文章,未来持续高质量输出 🎉🎉
- 🔥🔥🔥 系列文章集合,高并发,源码应有尽有 👍👍
- 走过路过不要错过 ,知识无价还不收钱 ❗❗