Hello~ Internet!
來到這個系列的第三篇，經過上一篇的介紹大家應該都可以製作一個有互動事件的應用程式了吧~~！還沒看得可以點這裡看上一篇介紹喔！
這一篇我們來開始製作美化介面的腳本吧！
這篇會介紹到:
- QSS
- QSS 語法規則
- 為 Widget 加上 ID
- 套用在應用程式上
QSS
Qss ( Qt Style Sheet )，這是 Qt 用來控制顯示介面元素的一種語法。
QSS 大量使用了 CSS 的語法，但是能使用的卻沒有很多，像是選擇器比較少或是能使用的屬性也不多，比較大的好處是可以讓UI跟美化的部分分開，也是為了比較好維護吧！
QSS 的語法規則
因為語法幾乎就是 CSS 所以我想大家應該會看起來很熟悉吧XD！
QSS 就是像下面這樣，超級像 CSS 的!!!
選擇器 { 屬性: 值; }
都是由選擇器選與自己想要改變的元件，再設定屬性的值。
都是由大括號包刮起來。
至於怎麼選擇元件呢?
- CSS標籤 => PyQt5 元件名稱
- CSS ID => PyQt5 ObjectName
像是我們想要改變上次範例的 QPushButton 的樣式的話我們可以這樣設定。
在下面的範例中我們設定了 border 的樣式
並把 background-color 設定為白色、改圓角、改字體。
QPushButton {
background-color:
white;
border-radius:
15px;
border-radius:
30px;
border-style:
solid;
border-width:
10px;
border-color:
green;
font:
63 20pt "Adobe 繁黑體 Std B";
}
並且在多加一行設定
self.button.setStyleSheet( btnqssStyle )
大家可以自己跑跑看才可以更印象深刻喔…
現在的 QPushButton 大概長下面這個樣子~
(抱歉我沒有太多的美術天分，隨便加一點美化的屬性這樣QAQ)
(歡迎大家分享自己設計的介面喔~)
為 Widget 加上 ID
還記得剛剛有提到 ID 就是 ObjectName 嗎?
沒錯!現在就是要來介紹他!
作法很簡單~ 就是利用 setObjectName( name )
沒錯就是這麼簡單XD
ObjectName 就是 PyQt5 的 ID
套用在應用程式上
要將剛剛寫的 CSS 設定到元件上有兩種方法
第一種我們現在先不會用到，因為那涉及到後面將 UI 分離的單元~
所以現在先當作 string 的方式設定
- 可以把這些設定檔製作成qrc檔案的方式，在藉由 pyrrc5 這個程式轉譯成 python 檔案
- 直接把 QSS 當作 string 設定
就像下面這樣把 QSS 當作 multi line string 放入 setStyleSheet 這個 function 中
self.button = QtWidgets.QPushButton(self.centralwidget)
self.button.setStyleSheet(
"""
/*background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(255, 0, 0, 255), stop:1 rgba(0, 0, 255, 255));*/
background-color: white;
border-radius: 15px;
border-radius:
30px;
border-style:
solid;
border-width:
10px;
border-color: green;
font: 63 20pt "Adobe 繁黑體 Std B";
"""
)
這樣就可以設定好你的 QSS Style Sheet 了！
這邊就 show 一下要怎麼讓背景跟 這篇 做得一模一樣吧~
class MainWindow(QMainWindow):
def __init__(self, parent=None):
super().__init__(parent=parent)
self.resize(1200, 800)
self.setStyleSheet("""#centralwidget {
background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(87, 255, 140, 255), stop:1 rgba(117, 210, 255, 255));
}"""
)
self.centralwidget = QtWidgets.QWidget(self)
self.centralwidget.setObjectName("centralwidget")
self.button = QtWidgets.QPushButton(self.centralwidget)
self.button.setText("Hello")
self.button.clicked.connect(self.btnOnClicked)
self.button.setStyleSheet(
"""
/*background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(255, 0, 0, 255), stop:1 rgba(0, 0, 255, 255));*/
background-color: white;
border-radius: 15px;
border-radius:
30px;
border-style:
solid;
border-width:
10px;
border-color: green;
font: 63 20pt "Adobe 繁黑體 Std B";
"""
)
self.setCentralWidget(self.centralwidget)
為了讓大家理解怎麼使用 ID(ObjectName) 而加入的一小段 code
這邊只是製作一個總父元件叫做 centralwidget
然後讓 QMainWindow 的 centralWidget 設定為它
如果不太理解 QMainWindow的centralWidget 的話可以看第一篇理解喔!
self.centralwidget = QtWidgets.QWidget(self)
self.centralwidget.setObjectName("centralwidget")
self.setCentralWidget(self.centralwidget)
這段是把畫面放大到 1200 * 800 (W * H)
然後用 lineargradient 線性漸層的顏色當背景
self.resize(1200, 800)
self.setStyleSheet("""#centralwidget {
background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(87, 255, 140, 255), stop:1 rgba(117, 210, 255, 255));
}"""
)
當然~
一樣的完整程式碼我都放在 gtihub 上給大家直接下載喔~
在這裡 github ep3
結尾:
不知道到這一篇有連續看的讀者有沒有什麼問題呀~?
我怕我自顧自地寫沒注意到任何沒講清楚的地方(?)
下一篇我會介紹到 怎麼將 UI 與 MainWindow Class 分離開來
這樣之後我們怎麼變 UI 都不需要更改到 MainWindow class 裡面的code了!
那這一篇就先到這邊囉~
不知道大家覺得這樣的系列文好不好 在下面留言告訴我喔
或是有什麼其他的想法都可以告訴我喔~
(不敢公開留言的話可以用 聯絡我 寄信跟我說喔~
那就先這樣啦！
我們下一篇見囉！
ㄅㄅ
Misster Hao's Blog 