Python GUI庫PyQt5圖形和特效樣式QSS介紹

QSS介紹前言

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選擇器有如下幾種類型

示范；修改上面例子

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

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

修改QSS樣式表

#設置樣式；按鈕的背景顏色綠色

qssStyle = '''QPushButton[name='btn2']{background-color:green}'''

運行程序，效果如下

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

#framecut，#frameInterrupt，#frameJoin {color：red}

表示這些ID使用的都是一個規則

#mytable QPushButton {color：red}

表示選擇所有ID為mytable的容器中包含的QPushButton

方箱模型

在樣式表中，每個部件都被看作是一個由四個同心相似的矩形組成的箱體：

空白(margin)、邊框(border)、填充(padding)和內容(content)。

對于一個平面部件——例如一個空白、邊框和填充都是0像素的部件——而言，這四個矩形是完全重合的。

空白區域位于邊框外，并且總是透明的。

邊框為部件提供了四周的框架，其border-style屬性可以設置為一些內置的框架風格，如inset、outset、solid和ridge。

填充在邊框和內容區域之間提供了空白間隔。

前景與背景

部件的前景色用于繪制上面的文本，可以通過color屬性指定。

背景色用于繪制部件的填充矩形，可以通過background-color屬性指定。

背景圖片使用background-image屬性定義，它用于繪制由background-origin指定的矩形區域（空白、邊框、填充或內容）。

背景 圖片在矩形區域內的對齊和平鋪方式可以通過background-position和background-repeat屬性指定。

如果指定的背景圖片具有alpha通道（即有半透明效果），通過background-color指定的顏色將會透過透明區域。這一功能可以使背景圖片在多種環境下重復利用。

該例子中使用的樣式表如下所示：

QFrame {
  margin: 10px;
  border: 2px solid green;
  padding: 20px;
  background-color: gray;
  background-image: url(qt.png);
  background-position: top right;
  background-origin: content;
  background-repeat: none;
}

在這個例子中，QFrame四周的空白、邊框和填充值都是一樣的。

實際上margin屬性可以在上下左右四個方向分別指定我們需要的不同值，例如：

QFrame {
  margin: 14px 18px 20px 18px;
}

同時，我們也可以分別指定margin-top、margin-right、margin-bottom、margin-left四個屬性。

QFrame {
  margin-top: 14px;
  margin-right: 18px;
  margin-bottom: 20px;
  margin-left: 18px;
}

雖 然目前我們僅僅使用了QFrame作為例子，但是我們也可以同樣的將這些屬性應用于任何一個支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

創建可縮放樣式

在默認情況下，通過background-image指定的背景圖片會自動重復平鋪，以覆蓋部件的整個填充矩形（即邊框里面的那個區域）。

如果我們想創建能夠隨著部件大小自動縮放而不是平鋪的背景，我們需要設置一種稱之為“邊框圖片”的東東。

“邊框圖片”可以通過border-image屬性指定，它同時提供了部件的背景和邊框。一個“邊框圖片”被分為九個部分（九宮格），有點向tic-tac-toe游戲的棋盤。

當一個部件的邊框被填充時，四角的格子通常不會發生變化，而其余的五個格子則可能被拉伸或平鋪以填充可用空間。

當指定一個“邊框圖片”時，除了圖片本身，我們還必須指定用來分割九宮格的四條分割線。同時我們還必須指定非邊角的格子是應該平鋪還是拉伸，以及邊框的寬度（用來確定邊角格子的大小，防止邊角被縮放變形）。

例如，下面的樣式表定義了上圖中的button：

QPushButton {
  border-width: 4px;
  border-image: url(button.png) 4 4 4 4 stretch stretch;
}

另外，“邊框圖片”還應該含有alpha通道，以使背景能夠在邊角處露出來。

控制大小

min-width和min-height兩個屬性可以用來指定一個部件的內容區域的最小大小。這兩個值將影響部件的minimumSizeHint()，并在布局時被考慮。

例如：

QPushButton {
  min-width: 68px;
  min-height: 28px;
}

如果該屬性沒有被指定，最小大小將從部件的內容區域和當前樣式中繼承。

處理偽狀態

部件的外觀可以按照用戶界面元素狀態的不同來分別定義，這在樣式表中被稱為“偽狀態”。例如，如果我們想在一個push button在被按下的時候具有sunken的外觀，我們可以指定一個叫做 :pressed 的偽狀態。

QPushButton {
  border: 2px outset green;
  background: gray;
}
QPushButton:pressed {
  border-style: inset;
}

可用的偽狀態列表

使用子部件定義微觀樣式

許多部件都包含有子元素，這些元素可以稱為“子部件”。Spin box的上下箭頭就是子部件最好的例子。

子 部件可以通過::來指定，例如QDateTimeEdit::up-button。定義子部件的樣式與定義部件非常相似，它們遵循前面提到的方箱模型（即 它們可以擁有自己的邊框、背景等），并且也可以和偽狀態聯合使用（例如QSpinBox::up-button:hover）。

可用的子部件類型

子部件列表

通過指定subcontrol-position和subcontrol-origin屬性，子部件可以被放置在部件箱體內的任何位置。并且，子部件的位置 還可以使用相對或絕對的方式進一步的調整。具體選擇何種調整方式取決于子部件具有固定的大小，還是會隨著父部件而變化。

相對定位

相對定位適合于子部件具有固定大小的情形（通過width和height指定子部件大?。?。使用這種方式，子部件可以以相對于subcontrol- position和 subcontrol-origin屬性定義的原始位置進行移動調整。

使用left屬性可以把子部件向右移，top屬性可以把子部件向左移。

例如：

QPushButton::menu-indicator {
  image: url(menu_indicator.png);
  width: 13px;
  height: 13px;
  subcontrol-origin: padding;
  subcontrol-position: bottom right;
}

當按下按鈕時，我們可以把菜單指示器從原來的位置向右下方移動幾個像素來模擬按鈕按下的狀態。

QPushButton::menu-indicator:pressed {
  position: relative;
  top: 2px;
  left: 2px;
}

絕對定位

絕對定位適合于子部件的位置隨父部件的變化而變的情形。與前面的例子相同，subcontrol-origin定義了父部件箱體的參考矩形。子部件的矩形區域則可以隨后通過相對于這個參考矩形四邊的偏移量來定義。

QPushButton::menu-indicator {
  border: 2px solid red;
  subcontrol-origin: padding;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 40px;
}

對于寬度或高度固定的子部件，subcontrol-position被用來說明其在subcontrol-origin指定矩形內的對其方式：

QPushButton::menu-indicator {
  image: url(menu_indicator.png);
  width: 13px;
  subcontrol-origin: padding;
  subcontrol-position: bottom right;
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;

本文先簡單介紹下PyQt5的樣式QSS，更多關于Python GUI庫PyQt5圖形和特效樣式QSS請查看下面的相關鏈接