QSS---样式表

1、QSS---样式表：通过样式表调整外观样式。（有些属性只适用于部分控件）

选择器：指再参考的过程中借助选择器二次筛选。

 当一个控件不设置父控件，他就是一个独立的窗口；局部变量走完某个方法不被引用的情况下，就会被释放，所以将他设置为self，为全局变量。

from PyQt5.Qt import *

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QSS的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        box1 = QWidget(self)
        box2 = QWidget(self)
        # 全局筛选，借用QApplication筛选，设置方式一
        self.setStyleSheet("QPushButton {background-color:orange}")
        # 可以通过选择器设置部分控件的颜色
        #box1.setStyleSheet("QPushButton {background-color:orange;}")
        #box1.setStyleSheet("background-color:orange")
        #box2.setStyleSheet("background-color:cyan")

        #样式表影响的空间范围，级联关系
        label1 = QLabel("标签1", box1)
        label1.move(50, 50)
        btn1 = QPushButton("按钮1", box1)
        btn1.move(150, 50)

        label2 = QLabel("标签2", box2)
        label2.move(50, 50)
        btn2 = QPushButton("按钮1", box2)
        btn2.move(150, 50)


        v_layout = QVBoxLayout()
        self.setLayout(v_layout)

        v_layout.addWidget(box1)
        v_layout.addWidget(box2)
        # 当一个控件不设置父控件，他就是一个独立的窗口
        # 局部变量走完这个方法就会被释放，所以将他设置为self，为全局变量
        self.other_btn = QPushButton("按钮3")
        self.other_btn.show()

if __name__ == "__main__":
    import sys
    app = QApplication(sys.argv)
    window = Window()
    window.resize(500, 500)
    window.show()
    # 设置方式2，还包含独立的窗口控件，即包含单独的按钮窗口控件
    app.setStyleSheet("QPushButton {background-color:orange}")

    sys.exit(app.exec_())

2、使用注意事项：

通过不同的选择器选择不同和的控件设置。

通过id分别选择不同的控件，设置颜色。

 # 通过id选择器定位标签1
 app.setStyleSheet("QLabel#l1 {background-color:orange} QPushButton#b2 {background-color:cyan}")

当字符串内内容特别长的情况下，一般会写一个qss文件，将所有参数内容写入文件，在读取出来。

设置一个test.qss文件：

可以将界面与样式分开，更好调整界面最后的样式。

    with open("test.qss", "r") as f:
        content = f.read()
        app.setStyleSheet(content)

自定义一个类，是应该用静态方法还是实例方法或者类方法：

        看在类中要用到那些参数，用不到的参数就可以不传，不需要传self类本身的情况，就是静态方法，需要借助装饰器设置。

自定义一个tool类，设置样式：

if __name__ == "__main__":
    import sys
    # 从模块中导入一个模块
    from tool_ import QSSTool
    app = QApplication(sys.argv)
    window = Window()
    window.resize(500, 500)
    window.show()
    QSSTool.setQssToObj("test.qss", app)

    # 通过id选择器定位标签1
    sys.exit(app.exec_())

 3、QSS语法：

 qss选择器：用来进行控件的2次选择。

qss伪状态：可以控制控件在不同的状态下展示不同的样式（鼠标按下与释放等类似不同状态）

qss声明：指明具体的样式是什么样。

那些控件在那些状态下拥有什么样的样式和外观。

①：id选择器：QLable#l1,通过id选择指定控件。（hover指鼠标放上的状态）

②：类选择器：QLabel

QLabel#l1 {
    background-color:orange
}
QLabel#l1:hover {
    background-color:gray
}
QPushButton#b2 {
    background-color:cyan;
    border:6px dotted yellow
}

声明：通配符选择器（所有的控件，包括窗口）；

* {
    background-color:gray;
}

类型选择器：匹配所有控件：通过控件类型来匹配控件(包括它所有的子类)。

QWidget {
    background-color:gray;
}

类选择器：加上点之后，不包括他的子类,只选择该类的控件。

.QPushButton {
    background-coloe:gray
}

id选择器（setObjectName）,可以不用写类名：

#pick {
    background-color:pink
}

属性选择器：通过属性值来匹配控件，如果是警告信息就加一个黄色的边框，如果是一个错误信息，就加一个红颜色的边框。

.QLabel {
    background-color:gray
}
.QLabel[notice_level='error'] {
    border:3px solid red    
}
.QLabel[notice_level='warning'] {
    border:3px solid yellow    
}

给标签设置属性：（也可以借用notice_level属性值做筛选，不用规定属性到底是什么值，有的标签不带属性），借助setProperty()方法。

label1.setProperty("notice_level", "warning")

 后代选择器：box2中的所有标签内部都加上红色背景。找到box2中所包含的控件中的所有标签控件，包括直接包含和间接包含。

QWidget#box2 QLabel {
    background-color:pink;
}

子选择器：后代选择器中的直接包含，不包括间接包含。

子控件选择器：用来筛选一个符合控件上的子控件：

 

指示器被选中是一种状态，不被选中是另外一种状态。

QCheckBox::indicator {
    width:20px;
    height:20px;
}
QCheckBox::indicator:checked {
    image:url("../../xxx.png")
}
QCheckBox::indicator:unchecked {
    image:url("../../x.png")
}

 4、注意：以上选择器可以组合选中，使用逗号隔开。

QWidget#box2 QLabel,#btn1 #btn2 {
    background-color:pink
}