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示例現在看起來有很大不同。嘗試運作代碼以檢查其新外觀：