告別會議無趣，也許就差這麼一個工具（三）

摘要： 上篇文章我們講述了系統的功能實現，但是介面卻差強人意，這次就來看看怎麼將系統設計的更加美化和簡潔。 3.3 QSS樣式講解 3.3.1 QSS的概念 QSS全稱Qt Style Sheets，即Qt樣式表。它是Qt提供的一種用來自定義控制元件外觀的機制。QSS大量參考了CSS的內容...

上篇文章我們講述了系統的功能實現，但是介面卻差強人意，這次就來看看怎麼將系統設計的更加美化和簡潔。

3.3 QSS樣式講解

3.3.1 QSS的概念

QSS全稱Qt Style Sheets，即Qt樣式表。它是Qt提供的一種用來自定義控制元件外觀的機制。QSS大量參考了CSS的內容，只不過QSS的功能比CSS要弱很多，體現在選擇器要少，可以使用的QSS屬性也要少很多，並且並不是所有的屬性都可以用在Qt的所有控制元件上。

3.3.1 QSS語法講解

QSS的語法規則幾乎與CSS相同。一條QSS的樣式是由兩部分組成的，一部分是選擇器指定了哪些控制元件會受到影響，另一部分是指定了屬性的值，表示這些控制元件的哪些屬性會受到影響。例如：

QPushButton { color: red }

• QPushButton

  表示選擇器，指定了所有的QPushButton或者是QPushButton的子類會受到影響，注意凡是繼承自QPushButton的子類也會受到影響，這是與CSS中不同的地方，因為CSS應用的都是一些標籤，沒有類的層次結構，更加沒有子類的概念。

• {color:red}

  規則的定義，表明指定前景顏色是紅色。

  整個語法意思就是設定QPushButton類以及其子類的所有控制元件的前景色是紅色。

1. 選擇器

選擇特定的類，如示例中的QPushButton，選擇器的選擇方式有七種，如下表：

選中物件	示例	描述
所有控制元件	*	選擇所有當前控制元件和其下的所有視窗部件
所有某類的控制元件物件，被其子控制元件物件繼承	QPushButton	選擇該類的所有例項，以及該類的子控制元件例項（允許該型別）
所有某類的控制元件物件，不被其子控制元件物件繼承	.QPushButton	選擇該類的所有例項，不包括子控制元件例項
ID選擇器	QPushButton #objectname	選擇該類例項中物件名為objectName的例項
選擇匹配某屬性的控制元件物件	QPushButton[y=”0”]	選擇該類滿足該屬性條件的所有例項
某類控制元件的子控制元件物件	QWidget > QPushButton	選擇指定該類下的直接子控制元件例項
某類控制元件的子孫控制元件物件	QWidget QPushButton	選擇指定該類下的所有子孫控制元件例項

QSS樣式示例

• QPushButton背景色置為紅色，程式碼如下：

QPushButton{background-color:red;}

• 物件名為start_button和pause_button的QPushButton背景色置為綠色，程式碼如下：

#start_button,#pause_button{background-color:rrgb(0,255,0)}

1. 子控制元件（sub-control）

子控制元件（同輔助選擇器），對於複雜的控制元件有必要對其子控制元件視窗進行控制，不同的控制元件類包含不同的子控制元件，如QCheckBox中包含indicator子控制元件。

QSS示例

QCheckBox的前面的選擇框背景色設定為紅色，程式碼如下：

QCheckBox#checkBox::indicator{
width:10px;
height:10px;
background-color: red; 
}

3.狀態選擇器（pseudo-states）

狀態選擇器，可根據不同控制元件的不同狀態對視窗進行控制，如”hover”表示滑鼠放上時的狀態，”pressed”表示滑鼠保持按下時的狀態，可根據狀態設定不同的外觀.

QSS示例

滑鼠放在QPushButton上面時背景色設定為紅色，程式碼如下：

QPushButton：hover{background-color:red;}

4.QSS樣式其他方式

• 屬性（property)

屬性，是一個視窗部件所固有的特徵，每一個型別的視窗控制元件都會有屬於他們自己的屬性，如width，height（輔助選擇器才有），color等等，定製控制元件的不同外觀。注意：屬性是使用邏輯否(!)操作符，如!hover，是滑鼠未放在上面的其他狀態。

• 屬性值（value）

屬性值，跟在每一個屬性後面有一個值，可以是bool，int，10px，red，rgb(0,0,0)等等，根據屬性的不同，屬性值的型別不同，通過修改指定控制元件的指定屬性的屬性值來實現不同的效果，如示例：background-color、width、height等。

• 盒模型（box model）

  包含了4個影響佈局的矩形

  

  qss5.png

  • content rectangle：繪製視窗部件的內容的區域，如文字，圖片。
  • padding rectangle：包圍content rectangle，由padding屬性指定填充操作，主要是視窗部件內容與邊緣線（border）之間的空隙，由top，right，bottom和left設定他的大小，預設為0。
  • border rectangle：包圍padding rectangle，為邊界預留空間，可認為是視窗的外框線。
  • margin rectangle：最外面的矩形，主要是負責與其他視窗部件間的距離。

3.3.1 QSS樣式使用方式

• 方法一，直接在程式碼使用，如下

#設定開始按鈕的背景色為紅色
self.start_button.setStyleSheet（“background-color:red;”）

• 方案二，將樣式設定寫在一個字尾名為.qss的檔案裡面，然後在程式碼介面載入該檔案，實現邏輯功能和樣式美化的分離，本文使用的就是這個方式

1. 在隨機點名資料夾下面新建一個檔案，命名為【style.qss】，程式碼如下：

/*設定主視窗背景*/
#centralwidget{
background-color:rgb(157, 11, 12);
border-radius:4px;
}

/*設定中間窗體顯示背景*/
#mid_widget{
background-color: rgb(244, 216, 215);
}

/*中間窗體按鈕樣式*/
#start_button,#pause_button{
/*定義最小最大寬高*/
min-width: 36px;
min-height: 36px;
color: balck;/*文字顏色*/
font-size:18px;
}

/*中間窗體按鈕滑鼠浮在上面的樣式*/
#start_button:hover,#pause_button:hover{
background-color: red; /*帶透明度白色背景*/
}

/*名字顯示樣式設定*/
#select_label{
font-size: 18px "黑體";

2. 在RandomCall.py新建一個函式readQss用來讀取qss檔案，程式碼如下：

def readQss():
"""讀取qss檔案"""

with open('style.qss',encoding='UTF-8') as f :

data = f.read()

f.close()

return data

3. 在主函式呼叫readQsss函式實現樣式，程式碼如下：

#讀取QSS樣式

app.setStyleSheet(readQss())

截至到此，本篇文章已經到了尾聲，簡單總結下，本篇文章介紹了PyQt的佈局、控制元件的使用、QTimer計數器的使用、QSS樣式的簡單學習，但是對上面的知識點並沒有做過深的講解，本篇只是想為利用python寫GUI的小夥伴起到拋磚引玉的作用，如果想深入研究的可以繼續學習。

歡迎關注微信公眾號【車伊洛】輸入關鍵字“隨機點名”獲得程式原始碼