PyQt5 QSS的UI美化

QSS语法规则

QSS的语法规则几乎与CSS相同。QSS样式由两部分组成，其一是选择器(Selector)，指定哪些控件会受影响。其二是声明(Declaration)，指定哪些属性应该在控件上进行设置。声明部分是一系列的“属性”：“值”对，使用（；）分隔不同属性值对，使用大括号（{}）将所有声明包括在内，如QPushButton { color:red }

设置所有按钮的样式

import sys
from PyQt5.QtWidgets import *

class WindowDemo(QWidget):
    def __init__(self):
        super().__init__()

        btn1 = QPushButton(self)
        btn1.setText("按钮1")

        btn2 = QPushButton(self)
        btn2.setText("按钮2")

        vbox = QVBoxLayout()
        vbox.addWidget(btn1)
        vbox.addWidget(btn2)

        self.setLayout(vbox)
        self.setWindowTitle("QSS样式")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    qssStyle = '''
        QPushButton {
            background-color : red;
            color : yellow;
        }
    '''

    win = WindowDemo()
    win.setStyleSheet(qssStyle)
    win.show()
    sys.exit(app.exec_())
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

设置指定按钮的样式

import sys
from PyQt5.QtWidgets import *

class WinForm(QWidget):
    def __init__(self):
        super().__init__()

        btn1 = QPushButton(self)
        btn1.setText("按钮1")
        btn1.setProperty("name", "btn1")

        btn2 = QPushButton(self)
        btn2.setText("按钮2")
        btn2.setProperty("name", "btn2")

        vbox = QVBoxLayout()
        vbox.addWidget(btn1)
        vbox.addWidget(btn2)
        self.setLayout(vbox)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    qssStyle = '''
        QPushButton[name="btn2"] {
            background-color : red;
            color : blue;
        }
    '''
    # 设置多个控件QSS
    # QPushButton, QLineEdit, QCombox { color: blue }
    win = WinForm()
    win.setStyleSheet(qssStyle)
    win.show()
    sys.exit(app.exec_())
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

QSS设置子控件样式

import sys
from PyQt5.QtWidgets import *

class WindowDemo(QWidget):
    def __init__(self):
        super(WindowDemo, self).__init__()
        self.initUI()

    def initUI(self):
        combo = QComboBox(self)
        combo.setObjectName("myQComboBox")
        combo.addItem("Windows")
        combo.addItem("Ubuntu")
        combo.addItem("Android")
        combo.move(50, 50)
        self.setGeometry(250, 200, 320, 150)
        self.setWindowTitle('QComboBOx 样式')

if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = WindowDemo()
    # 定义QComboBox控件的QSS样式
    qssStyle = '''
        QComboBox#myQComboBox::drop-down {
            image: url(./pyqt5/images/left_btn_tap.png)
        }
        QComboBox:hover { background-color:yellow }
        QComboBox::drop-down:hover { background-color:red; }
    '''
    win.setStyleSheet(qssStyle)
    win.show()
    sys.exit(app.exec_())
                
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

QSS伪状态

QSS伪状态选择器是以冒号开头的一个选择表达式，如：hover,表示鼠标指针掠过时的状态。QSS提供了很多伪状态。
QComboBox:hover { background-color:yellow }
QComboBox::drop-down:hover { background-color:red; }

通过QSS文件加载样式：

样式文件：style.qss

QMainWindow{
    border-image: url("./pyqt5/images/python.jpg");
}
QToolTip{
    border: 1px solid rgb(45, 45, 45);
    background: white;
    color: red;
}
1
2
3
4
5
6
7
8

import sys
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *

if __name__ == "__main__":
    
    app = QApplication(sys.argv)
    win = QMainWindow()
    win.setWindowTitle("通过QSS文件加载样式")
    styleFile = './pyqt5/qss/style.qss'
    with open(styleFile, "r") as f:
        style = f.read()
    win.setStyleSheet(style)
    f.close()

    win.setToolTip("通过.qss文件加载的样式")
    win.show()
    sys.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19