QSS的UI美化（四）

前言

QSS即Qt樣式表，是用來自定義控件外觀的一種機制，QSS大量參考了Css的內容，但QSS的功能要比Css弱得多，體現在選擇器少，可以使用的QSS屬性也少，而且並不是所有的屬性都可以應用在PyQt的控件上，QSS使頁面美化跟代碼層分開，利於維護

QSS的語法規則

QSS的語法規則幾乎與CSS相同，QSS樣式由兩部分組成，其中一部分是選擇器（Selector），指定哪些軟件會受到影響，另一部分是聲明（Declaration），指定哪些屬性應該在控件上進行設置，聲明部分是一系列的“屬性：值”對，使用（；）分割各個不同的屬性值對，使用大括號（{}）將所有的聲明包括在內，例如

QPushButton{color：red}

表示設置QPushButton類及其子類的所有實例的前景色是紅色，其中，QPushButton表示選擇器，指定所有的QPushButton類及其子類都會受到影響，注意，凡是繼承自QPushButton的子類都會受到影響，這是與Css不同的地方，因爲css應用的都是一些標籤，沒有類的結構，更沒有子類的概念，{color：red}則是規則的定義，表示指定前景色是紅色

實例：QSS語法規則示範

import sys
from PyQt5.QtWidgets import *

class WindowDemo(QWidget):
    def __init__(self):
        super(WindowDemo, self).__init__()
        #設置窗口標題
        self.setWindowTitle('QSS樣式')

        #實例化按鈕，設置顯示文本
        btn1=QPushButton(self)
        btn1.setText('按鈕1')

        # 實例化按鈕，設置顯示文本
        btn2=QPushButton(self)
        btn2.setProperty('name','btn2')
        btn2.setText('按鈕2')

        #添加控件到佈局中，設置窗口布局方式
        vbox=QVBoxLayout(self)
        vbox.addWidget(btn1)
        vbox.addWidget(btn2)

        #設置樣式；按鈕的背景顏色綠色
        # qssStyle = '''
        #    QPushButton[name='btn2']{background-color:green}
        #    '''
        qssStyle = '''
           QPushButton{background-color:green}
           '''
        #加載設置好的樣式
        self.setStyleSheet(qssStyle)
if __name__ == '__main__':
    app=QApplication(sys.argv)
    win=WindowDemo()
    win.show()
    sys.exit(app.exec_())

運行效果如下

代碼分析

在這個例子中。整個窗口加載自定義的QSS樣式，窗口中的按鈕背景色都爲綠色

首先定義了QSS樣式，然後使用setStyleSheet（）函數加載QSS樣式，setStyleSheet（）函數本身是QWidget的成員函數，PyQt中的大多數控件都是可以直接通過該函數來設置樣式

 qssStyle = '''
           QPushButton{background-color:green}
           '''
        #加載設置好的樣式
        self.setStyleSheet(qssStyle)

還可以使用多個選擇器指定相應的聲明，使用逗號將各個選擇器分離，例如

QPushButton,QLineEdit,QComboBox {color:blue}

它相當於

QPushButton {color:blue}
QLineEdit {color:blue}
QComboBox {color:blue}

---

---

---

---

QSS選擇器類型

QSS選擇器有如下幾種類型

類型	解析
通配選擇器	*, 匹配所有的控件
類型選擇器	QPushButton，匹配所有的QPushButton類及其子類的實例
屬性選擇器	QPushButton[name=’mybtn’],匹配所有的name屬性是myBtn的QPushButton實例。注意，該屬性是可以自定義的，不一定非得是類本身具有的屬性

示範；修改上面例子

給btn2設置屬性名，代碼如下

 btn2.setProperty('name','btn2')

修改QSS樣式表

#設置樣式；按鈕的背景顏色綠色
        qssStyle = '''
           QPushButton[name='btn2']{background-color:green}
           '''

運行程序，效果如下

類型	解析
類選擇器	.QPushButton，匹配所有的QPushButton實例，但是不匹配子類，注意，前面有一個點，這是與css類選擇器不同的地方
ID選擇器	myButton，匹配所有的ID爲myButton的控件，這裏的id實際上就是objectName指定的值
後代選擇器	QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton，不管是直接的，還是間接的
子選擇器	QDialog>QPushButton,匹配所有的QDialog容器中包含的QPushButton，其中要求QPushButton的直接父類容器是QDialog

另外，上面所有的選擇器可以聯合使用，並且支持一次設置多種選擇器類型，用逗號隔開，例如

#framecut，#frameInterrupt，#frameJoin {color：red}
表示這些ID使用的都是一個規則

#mytable QPushButton {color：red}
表示選擇所有ID爲mytable的容器中包含的QPushButton