Python GUI庫(kù)PyQt5圖形和特效樣式QSS介紹

QSS介紹前言

QSS即Qt樣式表，是用來(lái)自定義控件外觀的一種機(jī)制，QSS大量參考了Css的內(nèi)容，但QSS的功能要比Css弱得多，體現(xiàn)在選擇器少，可以使用的QSS屬性也少，而且并不是所有的屬性都可以應(yīng)用在PyQt的控件上，QSS使頁(yè)面美化跟代碼層分開(kāi)，利于維護(hù)

QSS的語(yǔ)法規(guī)則

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

QPushButton{color：red}

表示設(shè)置QPushButton類(lèi)及其子類(lèi)的所有實(shí)例的前景色是紅色，其中，QPushButton表示選擇器，指定所有的QPushButton類(lèi)及其子類(lèi)都會(huì)受到影響，注意，凡是繼承自QPushButton的子類(lèi)都會(huì)受到影響，這是與Css不同的地方，因?yàn)閏ss應(yīng)用的都是一些標(biāo)簽，沒(méi)有類(lèi)的結(jié)構(gòu)，更沒(méi)有子類(lèi)的概念，{color：red}則是規(guī)則的定義，表示指定前景色是紅色

實(shí)例：QSS語(yǔ)法規(guī)則示范

import sys
from PyQt5.QtWidgets import *

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

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

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

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

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

運(yùn)行效果如下

代碼分析

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

首先定義了QSS樣式，然后使用setStyleSheet（）函數(shù)加載QSS樣式，setStyleSheet（）函數(shù)本身是QWidget的成員函數(shù)，PyQt中的大多數(shù)控件都是可以直接通過(guò)該函數(shù)來(lái)設(shè)置樣式

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

還可以使用多個(gè)選擇器指定相應(yīng)的聲明，使用逗號(hào)將各個(gè)選擇器分離，例如

QPushButton,QLineEdit,QComboBox {color:blue}

它相當(dāng)于

QPushButton {color:blue}

QLineEdit {color:blue}

QComboBox {color:blue}

QSS選擇器類(lèi)型

QSS選擇器有如下幾種類(lèi)型

示范；修改上面例子

給btn2設(shè)置屬性名，代碼如下

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

修改QSS樣式表

#設(shè)置樣式；按鈕的背景顏色綠色

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

運(yùn)行程序，效果如下

另外，上面所有的選擇器可以聯(lián)合使用，并且支持一次設(shè)置多種選擇器類(lèi)型，用逗號(hào)隔開(kāi)，例如

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

表示這些ID使用的都是一個(gè)規(guī)則

#mytable QPushButton {color：red}

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

方箱模型

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

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

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

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

邊框?yàn)椴考峁┝怂闹艿目蚣埽鋌order-style屬性可以設(shè)置為一些內(nèi)置的框架風(fēng)格，如inset、outset、solid和ridge。

填充在邊框和內(nèi)容區(qū)域之間提供了空白間隔。

前景與背景

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

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

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

背景 圖片在矩形區(qū)域內(nèi)的對(duì)齊和平鋪方式可以通過(guò)background-position和background-repeat屬性指定。

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

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

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;
}

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

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

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

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

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

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

創(chuàng)建可縮放樣式

在默認(rèn)情況下，通過(guò)background-image指定的背景圖片會(huì)自動(dòng)重復(fù)平鋪，以覆蓋部件的整個(gè)填充矩形（即邊框里面的那個(gè)區(qū)域）。

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

“邊框圖片”可以通過(guò)border-image屬性指定，它同時(shí)提供了部件的背景和邊框。一個(gè)“邊框圖片”被分為九個(gè)部分（九宮格），有點(diǎn)向tic-tac-toe游戲的棋盤(pán)。

當(dāng)一個(gè)部件的邊框被填充時(shí)，四角的格子通常不會(huì)發(fā)生變化，而其余的五個(gè)格子則可能被拉伸或平鋪以填充可用空間。

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

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

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

另外，“邊框圖片”還應(yīng)該含有alpha通道，以使背景能夠在邊角處露出來(lái)。

控制大小

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

例如：

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

如果該屬性沒(méi)有被指定，最小大小將從部件的內(nèi)容區(qū)域和當(dāng)前樣式中繼承。

處理偽狀態(tài)

部件的外觀可以按照用戶(hù)界面元素狀態(tài)的不同來(lái)分別定義，這在樣式表中被稱(chēng)為“偽狀態(tài)”。例如，如果我們想在一個(gè)push button在被按下的時(shí)候具有sunken的外觀，我們可以指定一個(gè)叫做 :pressed 的偽狀態(tài)。

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

可用的偽狀態(tài)列表

使用子部件定義微觀樣式

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

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

可用的子部件類(lèi)型

子部件列表

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

相對(duì)定位

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

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

例如：

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

當(dāng)按下按鈕時(shí)，我們可以把菜單指示器從原來(lái)的位置向右下方移動(dòng)幾個(gè)像素來(lái)模擬按鈕按下的狀態(tài)。

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

絕對(duì)定位

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

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

對(duì)于寬度或高度固定的子部件，subcontrol-position被用來(lái)說(shuō)明其在subcontrol-origin指定矩形內(nèi)的對(duì)其方式：

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;

本文先簡(jiǎn)單介紹下PyQt5的樣式QSS，更多關(guān)于Python GUI庫(kù)PyQt5圖形和特效樣式QSS請(qǐng)查看下面的相關(guān)鏈接