每個控件提供的樣式太少？只能簡單的設置顏色、字體顏色、字體大小？每次設置都要輸入好長一串好麻煩？

現在你只要寫一段qss就能滿足你的一切需求，實現效果如下

本文將從下面三個方向慢慢闡述qss的使用

1、如何使用qss

2、如何修改組合型組件內的樣式 比如QComboBox

3、寫一個qss 從外部直接讀入

1、如何使用qss

QSS的即Qt Style Sheets，Qt樣式表。Qt樣式表是一種強大的機制，除了通過子類化QStyle已經可以實現的功能外，還允許您自定義窗口小部件的外觀。 QSS的使用類似于CSS，大部分CSS能用的QSS只要
稍微改動一下就能使用

CSS的使用基礎可以來這里查看

舉個例子，如上圖中 qss的基礎使用

def initBtnWidget(self):btnWidget = QWidget()btnLayout = QVBoxLayout()btnWidget.setLayout(btnLayout)btn1 = QPushButton("為了表現每個窗口不一樣,我是1號aaaaaaa")# 所有字句變成小寫字母;每個單詞的首字母大寫lowercase;capitalize;btn1.setStyleSheet("color: red; background-color:#ffe4fe22;Roman;font-size:20px;text""-decoration:line-through;text-transform:uppercase;")btn2 = QPushButton("我變了,我是2號")btn2.setStyleSheet("QPushButton:hover { color: red ;background:yellow} QPushButton:!hover { color: green } ")btn3 = QPushButton("我又變了,我是3號")btn3.setStyleSheet("QPushButton:pressed,QPushButton:hover { color: purple ;background:blue}")btn4 = QPushButton("沒想到吧,我是4號")btn4.setStyleSheet("background-image: url(computer.svg);background-size:10px 10px;background-repeat:no-repeat")btnLayout.addWidget(btn1)btnLayout.addWidget(btn2)btnLayout.addWidget(btn3)btnLayout.addWidget(btn4)buttonWindow = self.addWindow("qss的基礎使用", Qt.TopDockWidgetArea)buttonWindow.setWidget(btnWidget)

QT封裝的所有控件，窗口可以通過XXX.setStyleSheet(string) 來設置，如上面就是對QPushButton設置了不同的樣式，具體使用了什么樣式詳看上述代碼

關于QSS和CSS之間的聯系，通過下面鏈接可以略知一二

在第一個按鈕中，字母大小寫、首字母大寫的使用跟CSS是一樣的，可看該鏈接

2、如何修改組合型組件內的樣式 比如QComboBox

那我們如何修改一個較為復雜的組合控件中的某一個小件呢，我們以 QComboBox 為例

def initComboxWidget(self):comb = QComboBox()comb.setView(QListView())style1 = "\QComboBox{border: 5px solid gray;padding: 1px 18px 1px 3px;min-width: 200px;}\QComboBox::down-arrow {image: url(computer.svg);height:30px;width:20px;}\QListView::item:selected{ color:#DCDCDC;background:#00ff00;}\QListView::item:hover{ color:#DCDCDC;background:#3da79d;}"comb.setStyleSheet(style1)comb.addItem("哈哈哈")comb.addItem("嘻嘻嘻")comb.addItem("咯咯咯")comb.addItem("呵呵呵")combWidget = QWidget()combLayout = QVBoxLayout()combLayout.addWidget(comb)combWidget.setLayout(combLayout)combWindow = self.addWindow("從文件夾加載qss", Qt.RightDockWidgetArea)combWindow.setWidget(combWidget)

QComboBox含有至少三塊小部件組成，QLable、Arrow、QListView，那我們如何設置里面的各個樣式呢？

我們以QPushButton和QLishtView為例：

首先我們來看Arrow，也就是原本那個向下的那個箭頭，gif中已經替換成了一臺小電腦，我們通過**“QComboBox::down-arrow” 獲取到那個小箭頭，并且對其進行了設置！**

再來看看QListView，使用如同上述的Arrow，我們同樣通過**“QListView::item”獲取到QListView里面的小部件，但是要記住，要先comb.setView(QListView()) 設置一下QListView**

3、寫一個qss 從外部直接讀入

原本一個腳本干干凈凈，多了這些樣式又臭又長？？

我們可以把這些樣式設置寫到一個單獨的文件夾里，然后通過讀取文件的形式將其讀取并設置到對應的控件、窗口上！

def initReadFromQss(self):editorLine = QLineEdit(self)loadStyleSheetFromFile(editorLine, "defaultQss.qss")editorWidget = QWidget()editorLayout = QVBoxLayout()editorLayout.addWidget(editorLine)editorWidget.setLayout(editorLayout)editorWindow = self.addWindow("從文件夾加載qss", Qt.LeftDockWidgetArea)editorWindow.setWidget(editorWidget)def loadStyleSheetFromFile(obj, file):if file:styles = []qss_file = os.path.join(RootPath, file)styles.append(codecs.open(qss_file, "r", "utf8").read())styleSheet = "\n".join(styles)obj.setStyleSheet(styleSheet)

最后附上完整代碼

class DockWindow(QDockWidget):def __init__(self, windowName, parent=None):super(DockWindow, self).__init__(windowName, parent)self.parent = parentself.setContentsMargins(0, 0, 0, 0)class MainWindow(QMainWindow):def __init__(self):super(MainWindow, self).__init__()self.initBtnWidget()self.initComboxWidget()self.initReadFromQss()self.setWindowTitle("qss的使用")def addWindow(self, title, pos):widget = DockWindow(title, self)self.addDockWidget(pos, widget)return widgetif __name__ == '__main__':import sysapp = QApplication(sys.argv)mainWindow = MainWindow()mainWindow.show()sys.exit(app.exec_())

上述幾個關鍵函數在上文已經給出

總結

以上是生活随笔為你收集整理的qss文件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。