PySide6:设置Widgets的样式

QtWidgets应用程序根据平台使用默认主题。在某些情况下，系统范围内的配置会修改Qt主题，应用程序的显示也会有所不同。

但是，您可以处理自己的小部件，并为每个组件提供自定义样式。作为示例，请看以下简单片段：

import sys
from PySide6.QtCore import Qt
from PySide6.QtWidgets import QApplication, QLabel

if __name__ == "__main__":
    app = QApplication()
    w = QLabel("This is a placeholder text")
    w.setAlignment(Qt.AlignCenter)
    w.show()
    sys.exit(app.exec())      

执行此代码时，您将看到一个简单的QLabel在中心对齐，并带有占位符文本。

您可以使用类似CSS的语法设置应用程序的样式。有关详细信息，请参见Qt样式表参考。

通过设置一些CSS属性（如背景色和字体系列），可以对QLabel进行不同的样式设置，因此让我们看看这些更改后的代码是什么样子的：

import sys
from PySide6.QtCore import Qt
from PySide6.QtWidgets import QApplication, QLabel

if __name__ == "__main__":
    app = QApplication()
    w = QLabel("This is a placeholder text")
    w.setAlignment(Qt.AlignCenter)
    w.setStyleSheet("""
        background-color: #262626;
        color: #FFFFFF;
        font-family: Titillium;
        font-size: 18px;
        """)
    w.show()
    sys.exit(app.exec())      

现在，当您运行代码时，请注意QLabel看起来与您的自定义样式不同：

提示：

如果您没有安装Titillium字体，可以尝试使用其他任何字体。请记住，您可以使用QFontDatabase列出已安装的字体，特别是families（）方法。

像在前面的代码片段中那样，分别设置每个UI元素的样式需要做很多工作。更简单的替代方法是使用Qt样式表，它是一个或多个.qss文件，用于定义应用程序中UI元素的样式。

更多示例可以在Qt样式表示例文档页面中找到。

Qt Style Sheets

警告

在开始修改应用程序之前，请记住，您将负责应用程序的所有图形细节。更改页边距和大小可能会看起来奇怪或不正确，因此在更改样式时需要小心。建议创建一个全新的Qt样式，以涵盖所有可能的转角情况。

qss文件与CSS文件非常相似，但您需要指定Widget组件和对象的名称（可选）：

QLabel {
    background-color: red;
}

QLabel#title {
    font-size: 20px;
}      

第一种样式为应用程序中的所有QLabel对象定义背景色，而后面的样式仅为标题对象设置样式。

提示：

可以使用setObjectName（str）函数将对象名称设置为任何Qt对象，例如：对于label=QLabel（“Test”），可以编写label.setObjectName（“title”）

一旦您有了应用程序的qss文件，就可以通过读取该文件并使用QApplication.setStyleSheet(str)函数：

if __name__ == "__main__":
    app = QApplication()

    w = Widget()
    w.show()

    with open("style.qss", "r") as f:
        _style = f.read()
        app.setStyleSheet(_style)

    sys.exit(app.exec())      

拥有一个通用的qss文件允许您解耦代码的样式方面，而不需要在通用功能的中间混合它，您可以简单地启用或禁用它。

看看这个新的示例，其中包含更多小部件组件：

class Widget(QWidget):

def __init__(self, parent=None):

    super(Widget, self).__init__(parent)


    menu_widget = QListWidget()

    for i in range(10):

        item = QListWidgetItem(f"Item {i}")

        item.setTextAlignment(Qt.AlignCenter)

        menu_widget.addItem(item)


    text_widget = QLabel(_placeholder)

    button = QPushButton("Something")


    content_layout = QVBoxLayout()

    content_layout.addWidget(text_widget)

    content_layout.addWidget(button)

    main_widget = QWidget()

    main_widget.setLayout(content_layout)


    layout = QHBoxLayout()

    layout.addWidget(menu_widget, 1)

    layout.addWidget(main_widget, 4)

    self.setLayout(layout)      

这将显示一个两列小部件，左侧为QListWidget，右侧为QLabel和QPushButton。运行代码时如下所示：

如果将内容添加到前面描述的样式中。qss文件，您可以修改上一示例的外观：

QListWidget {
    color: #FFFFFF;
    background-color: #33373B;
}
QListWidget::item {
    height: 50px;
}
QListWidget::item:selected {
    background-color: #2ABf9E;
}
QLabel {
    background-color: #FFFFFF;
    qproperty-alignment: AlignCenter;
}
QPushButton {
    background-color: #2ABf9E;
    padding: 20px;
    font-size: 18px;
}      

样式主要改变不同窗口小部件的颜色，改变对齐方式，并包括一些间距。例如，您还可以对QListWidget项使用基于状态的样式，根据它们是否被选中来设置不同的样式。

在应用了本主题中探讨的所有样式选择后，请注意QLabel示例现在看起来有很大不同。尝试运行代码以检查其新外观：