PyQt5入门（二十四）QSS（上）

目录

一.QSS基础

二.使用QSS选择器设置控件样式

三.QSS子控件选择器

四. 使用QSS为标签和按钮添加背景图

五.装载QSS文件

---

一.QSS基础

QSS (Qt Style Sheets)
Qt样式表
用于设置控件的样式

代码： 

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_())

运行结果：

二.使用QSS选择器设置控件样式

代码：

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_())

运行结果：

三.QSS子控件选择器

代码：

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_())

运行结果：

四. 使用QSS为标签和按钮添加背景图

代码：

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_())

运行结果：

(正常状态)                       (按下状态)

五.装载QSS文件

代码：

QSS文件 style.qss

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

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

装载类 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_())

运行结果：

（初始态）          （点击按钮后）