PyQt5 QSS詳解

一、什麼是QSS

Qt樣式表(QSS) 是一種針對 Qt 庫的另外一種語言，它允許用戶為 Qt 程序自定義其樣式。QSS 是由 CSS 2.1 規範實現的一種層級樣式表語言，Qt 類可以通過 QSS 控制其樣式，從而定義它們的外觀和行為。QSS 繼承了 CSS 2.1 規範的所有特性，並增加了一些面向 Qt 類的子集。因此，如果你熟悉 CSS，你就可以很快地學會 QSS。

二、如何使用QSS

QSS 可以用代碼、樣式表文件或者 qss 文件來設置。代碼設置的方式如下：

from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

app = QApplication([])
win = QWidget()
style = """
    QWidget{
        background-color: #333;
    }
"""
win.setStyleSheet(style)
win.show()
app.exec_()

其中，setStyleSheet() 函數就是用來設置樣式的。將要設置的樣式定義在 style 變量中，再調用 setStyleSheet() 函數設置即可。

樣式表文件的使用方法：

#樣式文件（style.qss）
QWidget{
    background-color: #333;
}

#主程序
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

app = QApplication([])
win = QWidget()
win.setStyleSheet(open("style.qss","r").read())
win.show()
app.exec_()

注意: 路徑可以根據實際情況進行更改。

三、QSS基本功能

1. 控件類型

QSS 可以針對不同的控件類型設置不同樣式。其中有一些常用的控件類型:

• QWidget
• QLabel
• QPushButton
• QCheckBox
• QRadioButton
• QGroupBox
• QLineEdit
• QTextEdit

下面是一個利用 QSS 設置控件的背景顏色的示例：

#設定類型為 QPushButton 的背景顏色 
QPushButton{
    background-color: #cfcfcf;
}

2. 其它屬性

控件類型的屬性可以在 QSS 中進行設置，比如 background-color、color、font-size、padding 等等。

下面是一個利用 QSS 設置 QPushButton 的邊框樣式的示例：

#設置按鈕外邊框樣式 
QPushButton{
    border: 3px solid #222;
    border-radius: 5px;
}

3. 偽狀態(Pseudo-States)

在Qt中有三個常用的偽狀態：checked、hover、disabled。

下面是一個 QCheckBox 的示例：

#設置QCheckBox處於未勾選時的樣式
QCheckBox{
    background-color: #444;
    color: #fff;
}

#設置QCheckBox處於勾選時的樣式 
QCheckBox:checked{
    background-color: #222;
    color: #fff;
}

四、QSS實戰用例

1. 製作勾選框樣式

QCheckBox{
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
}

QCheckBox::indicator{
    width: 20px;
    height: 20px;
}

QCheckBox::indicator::unchecked{
    image: url(:/unchecked.png);
}

QCheckBox::indicator::checked{
    image: url(:/checked.png);
}

2. 製作按鈕樣式

QPushButton{
    background: white;
    border: 3px solid #222;
    color: #222;
    font-size: 20px;
    padding: 5px;
    border-radius: 5px;
    min-width: 100px;
} 

QPushButton:hover{
    background: #222;
    color: #fff;
}

3. 製作滾動條樣式

先定義滾動條的樣式：

QScrollBar:vertical {
    background:#fff;
    width:16px;
    margin:0px 0px 0px 0px;
    border: 1px solid #ddd;
    padding-left:1px;
}
 
QScrollBar::handle:vertical {
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ccc, stop:0.5 #aaa, stop:1 #ccc);
    min-height: 0px;
    border-radius: 8px;
}
 
QScrollBar::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QScrollBar::sub-line:vertical {
    height: 0 px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
 
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background:#f2f2f2;
}

然後使用樣式表將其應用於需要使用的控件中：

#應用樣式
QTreeView::verticalScrollBar{
    background-color: #fff;
    width: 16px;
    margin: 0px 0px 0px 0px;
    border: 1px solid #ddd;
}
 
QTreeView::handle:vertical {
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #ccc, stop:0.5 #aaa, stop:1 #ccc);
    min-height: 0px;
    border-radius: 8px;
}
 
QTreeView::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QTreeView::sub-line:vertical {
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
 
QTreeView::add-page:vertical,QTreeView::sub-page:vertical {
    background-color: #f2f2f2;
}

五、總結

本文通過不同方面的示例，詳細闡述了 PyQt5 QSS 的基本用法，讓讀者更好的掌握如何使用 QSS 對 PyQt5 應用進行樣式定製。希望讀者在實踐中，可以對 QSS 的使用更加熟練，並且可以根據自己的需求，製作出更加自己喜歡的應用風格。