Introduction à PyQt5 (vingt-quatre) QSS (on)

table des matières

1. Principes de base de QSS

2. Utilisez le sélecteur QSS pour définir le style de contrôle

3. Sélecteur de commande enfant QSS

4. Utilisez QSS pour ajouter des images d'arrière-plan aux étiquettes et aux boutons

5. Chargez le fichier QSS

---

1. Principes de base de QSS

QSS (Qt Style Sheets) La
feuille de style Qt est
utilisée pour définir le style du contrôle

 

Code: 

from PyQt5.QtWidgets import *
import sys


class BasicQSS(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS样式")
        btn1 = QPushButton(self)
        btn1.setText("按钮1")
        btn2 = QPushButton(self)
        btn2.setText("按钮2")

        btn3 = QPushButton(self)
        btn3.setText("按钮3")

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

        self.setLayout(vbox)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = BasicQSS()
    # 选择器
    #所有的QPushButton控件都设置为背景颜色为红色
    qssStyle = '''
        QPushButton {
            background-color:red
        }
    '''
    form.setStyleSheet(qssStyle)
    form.show()
    sys.exit(app.exec_())

résultat de l'opération:

 

2. Utilisez le sélecteur QSS pour définir le style de contrôle

Code:

from PyQt5.QtWidgets import *
import sys


class QSSSelector(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS样式")
        btn1 = QPushButton(self)
        btn1.setText("按钮1")
        btn2 = QPushButton(self)
        #设置name属性，可根据属性来指定按钮
        btn2.setProperty('name','btn2')
        btn2.setText("按钮2")

        btn3 = QPushButton(self)
        btn3.setProperty('name','btn3')
        btn3.setText("按钮3")

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

        self.setLayout(vbox)
if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = QSSSelector()
    # 选择器
    #指定按钮
    qssStyle = '''
        QPushButton[name="btn2"] { 
            background-color:red;
            color:yellow;
            height:120;
            font-size:60px;
        }
        QPushButton[name="btn3"] {
            background-color:blue;
            color:yellow;
            height:60;
            font-size:30px;
        }
    '''
    form.setStyleSheet(qssStyle)
    form.show()
    sys.exit(app.exec_())

résultat de l'opération:

 

3. Sélecteur de commande enfant QSS

Code:

from PyQt5.QtWidgets import *
import sys


class QSSSubControl(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS子控件选择器")
        combo = QComboBox(self)
        #设置下拉框名字
        combo.setObjectName("myComboBox")
        combo.addItem("Window")
        combo.addItem("Linux")
        combo.addItem("Mac OS X")
        combo.move(50,50)

        self.setGeometry(250,200,320,150)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = QSSSubControl()
    '''
    通过名字来引用,#myComboBox相当于web里通过id来引用
    drop-down是下拉子控件
    '''
    qssStyle = '''
       QComboBox#myComboBox::drop-down {
           image:url(../picture/icon/first.png)
       }
    '''
    form.setStyleSheet(qssStyle)
    form.show()
    sys.exit(app.exec_())

résultat de l'opération:

 

4. Utilisez QSS pour ajouter des images d'arrière-plan aux étiquettes et aux boutons

Code:

from PyQt5.QtWidgets import *
import sys


class LabelButtonBackground(QWidget):
    def __init__(self):
        super().__init__()
        label1 = QLabel(self)
        #鼠标放在上面就提示
        label1.setToolTip('这是一个文本标签')
        #QSS方式在label1上设置背景图
        label1.setStyleSheet('QLabel{border-image:url(../picture/images/python.jpg);}')

        label1.setFixedWidth(476)
        label1.setFixedHeight(259)

        btn1 = QPushButton(self)
        btn1.setObjectName('btn1')
        btn1.setMaximumSize(48,48)
        btn1.setMinimumSize(48, 48)

        #正常状态和按下状态时按钮图标不同
        style = '''
            
            #btn1{
                border-radius:4px;
                background-image:url('../picture/images/add.png');
            }
            #btn1:Pressed {
                background-image:url('../picture/images/addhover.png');
            }
        '''
        btn1.setStyleSheet(style)

        vbox = QVBoxLayout()
        vbox.addWidget(label1)
        vbox.addStretch()
        vbox.addWidget(btn1)

        self.setLayout(vbox)
        self.setWindowTitle('使用QSS为标签和按钮添加背景图')


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = LabelButtonBackground()
    form.show()
    sys.exit(app.exec_())

résultat de l'opération:

(État normal)                       (État pressé)

 

5. Chargez le fichier QSS

Code:

Fichier QSS style.qss

QMainWindow{
    border-image:url(../picture/images/python.jpg);
}

QToolTip{
    border:1px solid rgb(45,45,45);
    background:white;
    color:red
}

Classe de charge CommonHelper.py

#装载类
class CommonHelper:
    @staticmethod
    def readQSS(style):
        with open(style,'r') as f:
            return f.read()

 loadQSS.py

import sys
from PyQt5.QtWidgets import *
from pyqt.QSS.CommonHelper import CommonHelper

class MainWindow(QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.resize(477, 258)
        self.setWindowTitle("加载QSS文件")
        btn = QPushButton()
        btn.setText('装载QSS文件')
        #鼠标放到上面会有提示信息
        btn.setToolTip('提示文本')

        vbox = QVBoxLayout()
        vbox.addWidget(btn)
        btn.clicked.connect(self.onClick)
        self.setLayout(vbox)

        widget  = QWidget(self)
        self.setCentralWidget(widget)
        widget.setLayout(vbox)

    def onClick(self):
        styleFile = './style.qss'
        qssStyle = CommonHelper.readQSS(styleFile)
        win.setStyleSheet(qssStyle)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = MainWindow()
    win.show()
    sys.exit(app.exec_())

 

résultat de l'opération:

(État initial)          (Après avoir cliqué sur le bouton)