• 作者:老汪软件技巧
  • 发表时间:2024-09-09 10:02
  • 浏览量:

一. 前言

上一篇我们尝试了 PyQT6 的上手使用 ,这一篇来学习一下如何优化界面。

本文目标 :

二. 关于 PyQT 的 QSS2.1 QSS 简介2.2 QSS 常见用法一览

这里如果有一定的 CSS 基础 ,就可以跳过了 ,只是一个简单的 Demo :

QSS 里面最重要的就是三个环节 :

在写法上还有一些注意点:

一个标准用法 :

选择器 { /* 选择器表示这个样式针对什么对象生效 */
    属性类型: 属性值;  
}
/* 案例 */
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 上面有大量的主题样式可以开箱即用 ,这里列举几个 :

QDarkStyle 暗色主推库

pip install qdarkstyle

import qdarkstyle
// 也可以加载不同的样式 ,具体可以看官网
app = QApplication(sys.argv)
dark_stylesheet = qdarkstyle.load_stylesheet_pyqt6()
app.setStyleSheet(dark_stylesheet)

一些好用的主题推荐 :

总结

主要精力在做一个小工具上面 ,整体文章都以学习教程为主 。

内容不会太复杂 ,也是自己的学习路线 ,供大家参考

最后的最后 ❤️❤️❤️


上一条查看详情 +GSAP 动画从性能到核心概念
下一条 查看详情 +没有了