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…

总结

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

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

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