QSS介紹前言

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

QSS的語法規(guī)則

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

QPushButton{color：red}

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

實(shí)例：QSS語法規(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)行效果如下

代碼分析

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

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

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

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

QPushButton,QLineEdit,QComboBox {color:blue}

它相當(dāng)于

QPushButton {color:blue}

QLineEdit {color:blue}

QComboBox {color:blue}

QSS選擇器類型

QSS選擇器有如下幾種類型

示范；修改上面例子

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

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

修改QSS樣式表

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

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

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

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

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

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

#mytable QPushButton {color：red}

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

方箱模型

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

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

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

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

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

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

前景與背景

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

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

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

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

如果指定的背景圖片具有alpha通道（即有半透明效果），通過background-color指定的顏色將會透過透明區(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;
}

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

實(shí)際上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作為例子，但是我們也可以同樣的將這些屬性應(yīng)用于任何一個支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

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

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

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

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

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

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

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

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

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

控制大小

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

例如：

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

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

處理偽狀態(tài)

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

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

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

使用子部件定義微觀樣式

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

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

可用的子部件類型

子部件列表

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

相對定位

相對定位適合于子部件具有固定大小的情形（通過width和height指定子部件大小）。使用這種方式，子部件可以以相對于subcontrol- position和 subcontrol-origin屬性定義的原始位置進(jìn)行移動調(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)按下按鈕時，我們可以把菜單指示器從原來的位置向右下方移動幾個像素來模擬按鈕按下的狀態(tài)。

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

絕對定位

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

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

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

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，更多關(guān)于Python GUI庫PyQt5圖形和特效樣式QSS請查看下面的相關(guān)鏈接

最新評論