QSS子控件
QSS子控件實(shí)際上也是一種選擇器,其應(yīng)用在一些復(fù)合控件上,典型的如QComboBox,該控件的外觀是,有一個(gè)矩形的外邊框,右邊有一個(gè)下拉箭頭,點(diǎn)擊之后會彈出下拉列表,例如:
QComboBox:drop-down {image:url(dropdown.png)}
上面的樣式指定所有的QComboBox下拉箭頭的圖片是自定義的,圖片文件為dropdown.png
::drop-down子控件選擇器可以與上面提到到的選擇器一起聯(lián)合使用,例如
QComboBox#myQComboBox::drop-down {image:url(dropdown.png)}
表示為指定的id為myQComboBox的QComboBox控件的下拉箭頭自定義圖片,需要注意的是,子控件選擇器實(shí)際上是選擇復(fù)合控件的一部分,也就是對復(fù)合控件的一部分應(yīng)用樣式,例如為QComboBox下拉箭頭指定圖片,而不是QComboBox本身指定圖片
QSS偽狀態(tài)
QSS偽狀態(tài)選擇器是以冒號開頭的一個(gè)選擇表達(dá)式,例如hover,表示當(dāng)鼠標(biāo)指針經(jīng)過時(shí)的狀態(tài),偽狀態(tài)選擇器限制了當(dāng)控件處于某種狀態(tài)才可以使用的QSS規(guī)則,偽狀態(tài)只能描述一個(gè)控件或者一個(gè)復(fù)合控件的自控件的狀態(tài),所以它只能放在選擇器的最后面,例如
QComboBox:hover{background-color:red;}
表示到鼠標(biāo)經(jīng)過QComboBox時(shí).其背景色指定為紅色
該偽狀態(tài):hover描述的是QComboBox的狀態(tài),除可以描述所選擇的控件外,偽狀態(tài)還可以描述子控件選擇器所選擇的復(fù)合控件的子控件的狀態(tài)
QComboBox::drop-down:hover{background-color:red}
表示當(dāng)鼠標(biāo)指針經(jīng)過QComboBox的下拉箭頭時(shí),該下拉箭頭的背景色變成紅色
此外,偽狀態(tài)還可以用一個(gè)感嘆號來表示狀態(tài),例如,:hove表示鼠標(biāo)指針經(jīng)過的狀態(tài),:!hover表示鼠標(biāo)沒有經(jīng)過的狀態(tài),多種偽狀態(tài)可以同時(shí)使用,例如
QCheckBox:hover:checked{color:white}
表示當(dāng)鼠標(biāo)指針經(jīng)過一個(gè)選中的QCheckBox時(shí),設(shè)置其文字的前景色為白色
QSS提供了很多的偽狀態(tài),一些偽狀態(tài)只能用在特定的控件上,具體有哪些偽狀態(tài),在pyqt幫助文檔中有詳細(xì)的列表
實(shí)例:QComboBox的樣式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import sys
from PyQt5.QtWidgets import *
class WindowDemo(QWidget):
def __init__( self ):
super (WindowDemo, self ).__init__()
self .initUI()
def initUI( self ):
#實(shí)例化列表控件
combo = QComboBox( self )
#設(shè)置列表控件的名稱
combo.setObjectName( 'myQComboBox' )
#添加條目到列表控件
combo.addItem( 'Window' )
combo.addItem( 'Ubuntu' )
combo.addItem( 'Red Hat' )
#控件移動(dòng)到指定位置
combo.move( 50 , 50 )
#設(shè)置窗口的標(biāo)題與初始窗口的屬性
self .setGeometry( 250 , 200 , 320 , 150 )
self .setWindowTitle( 'QComboBox樣式' )
#設(shè)置樣式
qssStyle = '''
QComboBox#myQComboBox::drop-down{
image:url(./images/dropdown.png)
}
QComboBox#myQComboBox::drop-down:hover{
background-color:red
}
'''
self .setStyleSheet(qssStyle)
if __name__ = = '__main__' :
app = QApplication(sys.argv)
win = WindowDemo()
win.show()
sys.exit(app.exec_())
|
運(yùn)行程序,運(yùn)行效果如下
QDarkStyleSheet樣式表
除自己編寫的QSS樣式表,網(wǎng)上還有很多質(zhì)量很高的QSS樣式表。比如QDarkStyleSheet,它是一個(gè)用于PyQt應(yīng)用程序的深黑色樣式表
安裝
pip install qdarkstyle
實(shí)例:QDarKStyleSheet的顯示界面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import logging
import sys
from PyQt5 import QtWidgets, QtCore
# make the example runnable without the need to install
from os.path import abspath, dirname
sys.path.insert( 0 , abspath(dirname(abspath(__file__)) + '/..' ))
import qdarkstyle
import ui.example_pyqt5_ui as example_ui
def main():
"""
Application entry point
"""
logging.basicConfig(level = logging.DEBUG)
# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()
# setup ui
ui = example_ui.Ui_MainWindow()
ui.setupUi(window)
ui.bt_delay_popup.addActions([
ui.actionAction,
ui.actionAction_C
])
ui.bt_instant_popup.addActions([
ui.actionAction,
ui.actionAction_C
])
ui.bt_menu_button_popup.addActions([
ui.actionAction,
ui.actionAction_C
])
item = QtWidgets.QTableWidgetItem( "Test" )
item.setCheckState(QtCore.Qt.Checked)
ui.tableWidget.setItem( 0 , 0 , item)
window.setWindowTitle( "QDarkStyle example" )
# tabify dock widgets to show bug #6
window.tabifyDockWidget(ui.dockWidget1, ui.dockWidget2)
# setup stylesheet
app.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())
# auto quit after 2s when testing on travis-ci
if "--travis" in sys.argv:
QtCore.QTimer.singleShot( 2000 , app.exit)
# run
window.show()
app.exec_()
if __name__ = = "__main__" :
main()
|
運(yùn)行效果圖
|