Pyqt QSS簡單的Ui美化

本文轉載自查看原文 2015-05-30 17:10 17526 Pyqt

什么是QSS

QSS 是Qt StyleSheet 的簡稱，意思就是qt的樣式表格，StyleSheet 可以像CSS一樣的寫樣式。使頁面美化跟代碼層分開，利於維護。

QSS的語法

同css一樣，他也是由一個selector與一個declaration形成，selector指定了是對哪一個控件發生后果，而declaration才是真實的發生作用的語句。如：

QPushButton { background-color: red }

QPushButton指定了是對所有的QPushButton或是其子類控件（如用戶定義的MyPushButton）發生波及，而background-color:red闡明所有的受波及控件的背景都為red。除非“類名”，“對象名”，“Qt屬性名”這三樣東西是大小寫敏感的外其余的東西都是大小寫不敏感的，如color與Color代表統一屬性。萬一有幾個selector指定了相像的declaration, 能夠運用逗號（,各種綻放准繩驅動着ATM技巧不停變動,）將各個抉擇器分離，如：

QPushButton, QLineEdit, QComboBox { color: blue }

他相當於：

QPushButton { color: red }
QLineEdit { color: red }
QComboBox { color: red }

declaration部份是一系列的（屬性：值）對，使用分號（;）將各個不同的屬性值對分離，使用大括號（{}）將所有declaration包括在同時。

1，平常選擇器（selector）
Qt扶持所有的CSS2定義的選擇器，其祥細內容可以在w3c的網站上查找http://www.w3.org/TR/CSS2/selector.html，中間對照常用的selector類別有：
1.1 通用類型選擇器：*
會對所有控件有結果。
1.2 類別選擇器：QPushButton
匹配所有QPushButton的實例和其子類的實例。
1.3 屬性選擇器：QPushButton[flat=”false”]
匹配所有QPushButton屬性flat為false的實例，屬性分為兩種，靜態的和動態的，靜態屬性可以通過Q_PROPERTY() 來指定，動態屬性可以使用setProperty來指定，如：

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);

如果在設置了qss后Qt屬性變動了，必要重新設置qss來使其見效，可以使用先unset再set qss。

1.4 類選擇器：.QPushButton
所有QPushButton的實例，但不包括其子類，這相當於：

*[class~="QPushButton"]

~=的含義是測驗一個QStringList類別的屬性是否包羅給定的QString。
1.5 ID抉擇器：QPushButton#okButton
對應Qt里面的object name設置，使用這條CSS之前要先設置對應控件的object name為okButton，如：

Ok->setObjectName(tr(“okButton”));

1.6 后代選擇器：QDialog QPushButton
對於所有為QDialog后代（包括兒子，與兒子的兒子的遞歸）為QPushButton的實例
1.7 子選擇器：QDialog > QPushButton
對於所有的QDialog直接子類QPushButton的實例，不包羅兒子的兒子的遞歸。

關於如何寫樣式可參考Qt Style Sheets Examples 地址： http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qscrollbar

Pyqt4 examples里面也有關於QSS的例子：路徑： pyqt4_examples\widgets\stylesheet\stylesheet.py

實例

樣式可以添加到代碼頁面，也可以分離為單獨文件

資源圖片：

1. 這是一個樣式和代碼在同一頁面的Example：

  1 # -*- coding: utf-8 -*-
  2 from PyQt4 import QtCore, QtGui
  3 from PyQt4.QtGui import *
  4 from PyQt4.QtCore import *
  5 import sys
  6 import qr
  7 
  8 
  9 try:
 10     _fromUtf8 = QtCore.QString.fromUtf8
 11 except AttributeError:
 12     def _fromUtf8(s):
 13         return s
 14 
 15 try:
 16     _encoding = QtGui.QApplication.UnicodeUTF8
 17     def _translate(context, text, disambig):
 18         return QtGui.QApplication.translate(context, text, disambig, _encoding)
 19 except AttributeError:
 20     def _translate(context, text, disambig):
 21         return QtGui.QApplication.translate(context, text, disambig)
 22 
 23 
 24 
 25 
 26 class MainStyle(QWidget):
 27     def __init__(self, parent=None):
 28         super(MainStyle, self).__init__(parent)
 29         self.setWindowFlags(Qt.FramelessWindowHint)
 30         self.resize(200, 300)
 31         self.btn_close = QPushButton()
 32         self.btn_close.setStyleSheet("""QPushButton{background-image:url(./img/btn_close_normal.png);width:39px;height:18px;padding-top:0px;border:0px;}
 33                                     QPushButton:hover{background-image:url(./img/btn_close_highlight.png);}
 34                                     QPushButton:pressed{background-image:url(./img/btn_close_down.png);}""")
 35 
 36         self.btn_min = QPushButton()
 37         self.btn_min.setStyleSheet("QPushButton{background-image:url(./img/btn_close_normal1.png);width:39px;height:18px;padding-top:0px;border:0px;}")
 38 
 39         self.btn_setting = QPushButton()
 40         self.btn_setting.setStyleSheet("""QPushButton{background-image:url(./img/icon_cog.png);width:16px;height:16px;padding-top:0px;border:0px;margin-right:15px;}
 41                                         QPushButton:hover{background-image:url(./img/icon_cogs.png);}""")
 42 
 43         self.btn_photo = QPushButton()
 44         self.btn_photo.setStyleSheet("""QPushButton{background-image:url(./img/photo.png);width:32px;height:26px; border-radius: 10px;
 45                                         margin-right:60px;}""")   # border-radius 元素添加圓角邊框！
 46 
 47         #按鈕樣式一
 48         btn_one=QtGui.QPushButton(u"按鈕樣式一", self)
 49         btn_one.setGeometry(0, 100,100, 200)
 50         btn_one.setStyleSheet("QPushButton{background-color:blue;border:none;color:#ffffff;font-size:20px;}"
 51                                "QPushButton:hover{background-color:#333333;}")
 52         #按鈕樣式二
 53         btn_two=QtGui.QPushButton(u"按鈕樣式二", self)
 54         btn_two.setGeometry(100,100, 101, 200)
 55         btn_two.setStyleSheet("QPushButton{background-color:#D30000;border:none;color:#ffffff;font-size:20px;}"
 56                                  "QPushButton:hover{background-color:#333333;}")
 57 
 58         # 頂部布局
 59         self.topBarLayout = QtGui.QHBoxLayout()
 60         self.topBarLayout.addStretch()
 61         self.topBarLayout.addWidget(self.btn_photo,0,Qt.AlignRight | Qt.AlignHCenter)
 62         self.topBarLayout.addWidget(self.btn_setting,0,Qt.AlignRight | Qt.AlignHCenter)
 63         self.topBarLayout.addWidget(self.btn_min,0,Qt.AlignRight | Qt.AlignTop)
 64         self.topBarLayout.addWidget(self.btn_close,0,Qt.AlignRight | Qt.AlignTop)
 65         #main布局
 66         self.mainLayout = QtGui.QVBoxLayout()
 67         self.mainLayout.addLayout(self.topBarLayout,0)
 68         self.mainLayout.addStretch()
 69         self.mainLayout.addStretch()
 70         self.setLayout(self.mainLayout)
 71         self.mainLayout.setContentsMargins(0,0,0,0)
 72         self.mainLayout.setSpacing(0)
 73 
 74         self.connect(self.btn_close,QtCore.SIGNAL("clicked()"),QtGui.qApp,QtCore.SLOT("quit()"))
 75 
 76 
 77 
 78 
 79     def paintEvent(self,event):
 80         self.painter = QtGui.QPainter()
 81         self.painter.begin(self)
 82         self.painter.drawPixmap(self.rect(), QPixmap("./img/mianbg.png"))
 83         self.painter.end()
 84 
 85     #支持窗口拖動,重寫兩個方法
 86     def mousePressEvent(self, event):
 87         if event.button()==Qt.LeftButton:
 88             self.m_drag=True
 89             self.m_DragPosition=event.globalPos()-self.pos()
 90             event.accept()
 91 
 92     def mouseMoveEvent(self, QMouseEvent):
 93         if QMouseEvent.buttons() and Qt.LeftButton:
 94             self.move(QMouseEvent.globalPos()-self.m_DragPosition)
 95             QMouseEvent.accept()
 96 
 97     def mouseReleaseEvent(self, QMouseEvent):
 98         self.m_drag=False
 99 
100 
101 
102 
103 if __name__ == '__main__':
104     app = QApplication(sys.argv)
105     main = MainStyle()
106     main.show()
107     app.exec_()

效果：

2.這是一個樣式和代碼分離的Example：

在Qt Designer 中也可以添加樣式

但，我們現在不使用Qt Designer 填寫，我們使用外部qss文件

新建文件命名為css.qss

內容如下：

QPushButton#pushButton{background-image: url(:/cssimg/img/btn_close_normal.png);width:39px;height:18px;padding-top:0px;border:0px;}
QPushButton#pushButton:hover{background-image:url(:/cssimg/img/btn_close_highlight.png);}
QPushButton#pushButton:pressed{background-image:url(:/cssimg/img/btn_close_down.png);}

QPushButton#pushButton_2{background-image: url(:/cssimg/img/icon_cog.png);width:16px;height:16px;padding-top:0px;border:0px;margin-right:15px;}
QPushButton#pushButton_2:hover{background-image:url(:/cssimg/img/icon_cogs.png);}

通過傳入路徑\文件名的方式創建一個QFile對象，以readonly的方式打開，然后readAll，最后QtGui.qApp.setStyleSheet(styleSheet)就可以使qss生效。

在要引用的頁面添加：

1         file = QtCore.QFile('css.qss')
2         file.open(QtCore.QFile.ReadOnly)
3         styleSheet = file.readAll()
4         styleSheet = unicode(styleSheet, encoding='utf8')
5         QtGui.qApp.setStyleSheet(styleSheet)

完整代碼如下：

 1 # -*- coding: utf-8 -*-
 2 
 3 # Form implementation generated from reading ui file 'css2.ui'
 4 #
 5 # Created: Sat May 30 15:47:25 2015
 6 #      by: PyQt4 UI code generator 4.10.3
 7 #
 8 # WARNING! All changes made in this file will be lost!
 9 
10 from PyQt4 import QtCore, QtGui
11 
12 try:
13     _fromUtf8 = QtCore.QString.fromUtf8
14 except AttributeError:
15     def _fromUtf8(s):
16         return s
17 
18 try:
19     _encoding = QtGui.QApplication.UnicodeUTF8
20     def _translate(context, text, disambig):
21         return QtGui.QApplication.translate(context, text, disambig, _encoding)
22 except AttributeError:
23     def _translate(context, text, disambig):
24         return QtGui.QApplication.translate(context, text, disambig)
25 
26 class Ui_MainWindow(object):
27     def setupUi(self, MainWindow):
28         MainWindow.setObjectName(_fromUtf8("MainWindow"))
29         MainWindow.resize(446, 380)
30         self.centralwidget = QtGui.QWidget(MainWindow)
31         self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
32         self.pushButton_2 = QtGui.QPushButton(self.centralwidget)
33         self.pushButton_2.setGeometry(QtCore.QRect(350, 20, 31, 16))
34         self.pushButton_2.setStyleSheet(_fromUtf8(""))
35         self.pushButton_2.setText(_fromUtf8(""))
36         self.pushButton_2.setObjectName(_fromUtf8("pushButton_2"))
37         self.pushButton = QtGui.QPushButton(self.centralwidget)
38         self.pushButton.setGeometry(QtCore.QRect(390, 20, 39, 18))
39         self.pushButton.setCursor(QtGui.QCursor(QtCore.Qt.WaitCursor))
40         self.pushButton.setMouseTracking(False)
41         self.pushButton.setAutoFillBackground(False)
42         self.pushButton.setStyleSheet(_fromUtf8(""))
43         self.pushButton.setText(_fromUtf8(""))
44         self.pushButton.setObjectName(_fromUtf8("pushButton"))
45         MainWindow.setCentralWidget(self.centralwidget)
46         self.statusbar = QtGui.QStatusBar(MainWindow)
47         self.statusbar.setObjectName(_fromUtf8("statusbar"))
48         MainWindow.setStatusBar(self.statusbar)
49 
50         self.retranslateUi(MainWindow)
51         QtCore.QMetaObject.connectSlotsByName(MainWindow)
52 
53     def retranslateUi(self, MainWindow):
54         MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))
55         file = QtCore.QFile('css.qss')
56         file.open(QtCore.QFile.ReadOnly)
57         styleSheet = file.readAll()
58         styleSheet = unicode(styleSheet, encoding='utf8')
59         QtGui.qApp.setStyleSheet(styleSheet)
60 
61 import qr
62 
63 if __name__ == "__main__":
64     import sys
65     app = QtGui.QApplication(sys.argv)
66     MainWindow = QtGui.QMainWindow()
67     ui = Ui_MainWindow()
68     ui.setupUi(MainWindow)
69     MainWindow.show()
70     sys.exit(app.exec_())

效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【PYQT5快速開發】重定義邊框、QSS美化皮膚主題 qss按鈕美化 Qt界面美化 QSS Qt Creator中使用qss對界面美化沒有作用（效果）的問題 PyQt5通過使用QSS語法制作精美界面 jenkins主題簡單美化 C# Winfrom UI 美化 pyQt5簡單使用 PyQt教程(1)——最簡單的PyQt程序 PyQt5-QDateEdit的簡單使用