万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

PyQt5的界面美化秘密之批量设置部件的样式qss文件

2023-4-12 21:36| 发布者: wanhu| 查看: 147| 评论: 0

摘要: qss文件的引用在PyQt5中，可以使用QApplication类的setStyleSheet()方法来引用.qss样式表文件。以下是一个简单的案例：demo1.py中的代码from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButt ...

qss文件的引用

在PyQt5中，可以使用QApplication类的setStyleSheet()方法来引用.qss样式表文件。以下是一个简单的案例：

demo1.py中的代码

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
import sys

app = QApplication(sys.argv)

# 创建一个窗口和一个布局
window = QWidget()
layout = QVBoxLayout()

# 创建一个按钮并将其添加到布局中
button = QPushButton("Click me!")
layout.addWidget(button)

# 设置样式表
with open("style.qss") as f:
app.setStyleSheet(f.read())

# 将布局设置为窗口的主布局
window.setLayout(layout)

# 显示窗口
window.show()

# 运行应用程序的主循环
sys.exit(app.exec_())

style.qss文件里的内容

QPushButton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}

QPushButton:hover {
background-color: #008CBA; /* Blue */
}

运行结果：

关于选择器

在.qss样式表中，QPushButton是一个选择器，用于选择所有类型为QPushButton的部件并为其应用样式。选择器是一种 CSS 语法，用于指定要应用样式的 HTML 元素或 Qt 部件。

选择器由一个或多个选择器标记组成，它们之间通常用空格分隔。每个选择器标记可以是一个元素名称、一个类名或一个 ID。在 PyQt5 中，选择器标记使用 Qt 部件的类名来表示。

例如上面的样式：

QPushButton {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}

在这个样式表中，我们为所有类型为 QPushButton 的部件设置了相同的样式，例如背景颜色、边框、文本颜色和字体大小等。对于其他类型的部件，您需要使用不同的选择器来选择它们并为它们应用不同的样式。

除了元素选择器之外，还有其他类型的选择器可用于选择 Qt 部件，例如类选择器、ID 选择器、属性选择器等。您可以使用这些选择器来更精确地选择需要应用样式的部件。

关于选择器的定义

在 .qss 样式表中，选择器用于选择一个或多个需要应用样式的 Qt 部件。选择器通常由一个或多个选择器标记组成，它们之间通常用空格分隔。

选择器标记可以是以下之一：

元素名称：使用 Qt 部件的类名作为元素名称。例如，QPushButton 表示所有类型为 QPushButton 的部件。
类名：使用 . 符号加上类名来表示。例如，.myclass 表示所有使用 myclass 类名的部件。
ID：使用 # 符号加上 ID 来表示。例如，#myid 表示所有具有 myid ID 的部件。
属性：使用 [attribute=value] 语法选择具有特定属性值的部件。例如，[enabled=true] 表示所有已启用的部件。

以下是一些示例选择器：

QPushButton {
/* 应用于所有类型为 QPushButton 的部件 */
}

QLabel.myclass {
/* 应用于所有具有 myclass 类名的 QLabel 部件 */
}

QLineEdit#myid {
/* 应用于具有 myid ID 的 QLineEdit 部件 */
}

QTabWidget[tabPosition=South] {
/* 应用于 tabPosition 属性值为 South 的 QTabWidget 部件 */
}

您可以使用多个选择器标记来创建更复杂的选择器。例如，QPushButton#mybutton 表示具有 mybutton ID 的 QPushButton 部件。

在编写选择器时，请注意避免选择器过于具体，以免过度限制样式应用的范围。选择器应该足够灵活，以便在需要时可以轻松地应用到其他部件上。

拓展1：

QLineEdit#myid {
/* 应用于具有 myid ID 的 QLineEdit 部件 */
}

#myid 是一个 CSS 选择器，用于选择具有 myid ID 的 HTML 元素。在 HTML 中，可以为元素指定唯一的 ID 属性，以便在样式表中选择和操作该元素。在 CSS 中，使用 # 符号加上 ID 名称来选择具有指定 ID 的元素。

在 Qt 中，也可以使用 CSS 样式表为部件指定样式，其中也可以使用 # 符号加上 ID 名称来选择具有指定 ID 的部件。

例如，如果您在 Qt 程序中创建了一个具有 myid ID 的 QLineEdit 部件：

QLineEdit* myLineEdit = new QLineEdit();
myLineEdit->setObjectName("myid");

那么您可以使用 #myid 选择器来选择该部件并为其应用样式：

#myid {
background-color: #f2f2f2;
border: 2px solid #ccc;
border-radius: 4px;
padding: 8px 16px;
font-size: 16px;
color: #333;
}

在这个样式表中，我们使用 #myid 选择器来选择具有 myid ID 的部件，并为其应用一些样式，例如背景颜色、边框、边框半径、内边距、字体大小和文本颜色等。

请注意，ID 在整个 HTML 或 Qt 程序中应该是唯一的，因为重复使用相同的 ID 会导致选择器无法准确选择特定的元素或部件。

拓展2：

QTabWidget[tabPosition=South] {
/* 应用于 tabPosition 属性值为 South 的 QTabWidget 部件 */
}

[tabPosition=South] 是一个 Qt 样式表选择器，用于选择具有 tabPosition 属性值为 South 的部件并为其应用样式。这个选择器通常用于选择具有一个选项卡控件，其中选项卡控件的选项卡位置设置为底部。

在 Qt 中，可以使用 QTabWidget 部件来创建一个选项卡控件。QTabWidget 具有一个 tabPosition 属性，用于指定选项卡的位置。可以在样式表中使用 [tabPosition=South] 选择器来选择具有底部选项卡的 QTabWidget 部件并为其应用样式。

以下是一个示例，演示如何使用 [tabPosition=South] 选择器：

QTabWidget[tabPosition=South] {
background-color: #f2f2f2;
border: 2px solid #ccc;
border-radius: 4px;
padding: 8px 16px;
font-size: 16px;
color: #333;
}

QTabWidget[tabPosition=South]::tab-bar {
background-color: #ddd;
}

QTabWidget[tabPosition=South]::tab:selected {
background-color: #fff;
color: #333;
}

QTabWidget[tabPosition=South]::tab:!selected {
background-color: #ccc;
color: #999;
}

在这个样式表中，我们使用 [tabPosition=South] 选择器来选择具有底部选项卡的 QTabWidget 部件，并为其应用一些样式，例如背景颜色、边框、边框半径、内边距、字体大小和文本颜色等。

我们还使用了其他选择器来为选项卡控件的不同部分应用不同的样式，例如：