PyQT 的美化 : 人们总是会被好看的事物所吸引

志字辈小蚂蚁
1,962 阅读3分钟

一. 前言

上一篇我们尝试了 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())

image.png

三. 快速使用 Themes 套用模板

Github 上面有大量的主题样式可以开箱即用 ，这里列举几个 ：

QDarkStyle 暗色主推库

image.png

pip install qdarkstyle

import qdarkstyle

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

image.png

  • 可以看到 ，效果还是不错的

一些好用的主题推荐 ：

www.cnblogs.com/sandeepin/p…

总结

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

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

最后的最后 ❤️❤️❤️👇👇👇

avatar
文章
阅读
粉丝