QSS的UI美化（四）

前言

QSS即Qt样式表，是用来自定义控件外观的一种机制，QSS大量参考了Css的内容，但QSS的功能要比Css弱得多，体现在选择器少，可以使用的QSS属性也少，而且并不是所有的属性都可以应用在PyQt的控件上，QSS使页面美化跟代码层分开，利于维护

QSS的语法规则

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

QPushButton{color：red}

表示设置QPushButton类及其子类的所有实例的前景色是红色，其中，QPushButton表示选择器，指定所有的QPushButton类及其子类都会受到影响，注意，凡是继承自QPushButton的子类都会受到影响，这是与Css不同的地方，因为css应用的都是一些标签，没有类的结构，更没有子类的概念，{color：red}则是规则的定义，表示指定前景色是红色

实例：QSS语法规则示范

import sys
from PyQt5.QtWidgets import *

class WindowDemo(QWidget):
    def __init__(self):
        super(WindowDemo, self).__init__()
        #设置窗口标题
        self.setWindowTitle('QSS样式')

        #实例化按钮，设置显示文本
        btn1=QPushButton(self)
        btn1.setText('按钮1')

        # 实例化按钮，设置显示文本
        btn2=QPushButton(self)
        btn2.setProperty('name','btn2')
        btn2.setText('按钮2')

        #添加控件到布局中，设置窗口布局方式
        vbox=QVBoxLayout(self)
        vbox.addWidget(btn1)
        vbox.addWidget(btn2)

        #设置样式；按钮的背景颜色绿色
        # qssStyle = '''
        #    QPushButton[name='btn2']{background-color:green}
        #    '''
        qssStyle = '''
           QPushButton{background-color:green}
           '''
        #加载设置好的样式
        self.setStyleSheet(qssStyle)
if __name__ == '__main__':
    app=QApplication(sys.argv)
    win=WindowDemo()
    win.show()
    sys.exit(app.exec_())

运行效果如下

代码分析

在这个例子中。整个窗口加载自定义的QSS样式，窗口中的按钮背景色都为绿色

首先定义了QSS样式，然后使用setStyleSheet（）函数加载QSS样式，setStyleSheet（）函数本身是QWidget的成员函数，PyQt中的大多数控件都是可以直接通过该函数来设置样式

 qssStyle = '''
           QPushButton{background-color:green}
           '''
        #加载设置好的样式
        self.setStyleSheet(qssStyle)

还可以使用多个选择器指定相应的声明，使用逗号将各个选择器分离，例如

QPushButton,QLineEdit,QComboBox {color:blue}

它相当于

QPushButton {color:blue}
QLineEdit {color:blue}
QComboBox {color:blue}

---

---

---

---

QSS选择器类型

QSS选择器有如下几种类型

类型	解析
通配选择器	*, 匹配所有的控件
类型选择器	QPushButton，匹配所有的QPushButton类及其子类的实例
属性选择器	QPushButton[name=’mybtn’],匹配所有的name属性是myBtn的QPushButton实例。注意，该属性是可以自定义的，不一定非得是类本身具有的属性

示范；修改上面例子

给btn2设置属性名，代码如下

 btn2.setProperty('name','btn2')

修改QSS样式表

#设置样式；按钮的背景颜色绿色
        qssStyle = '''
           QPushButton[name='btn2']{background-color:green}
           '''

运行程序，效果如下

类型	解析
类选择器	.QPushButton，匹配所有的QPushButton实例，但是不匹配子类，注意，前面有一个点，这是与css类选择器不同的地方
ID选择器	myButton，匹配所有的ID为myButton的控件，这里的id实际上就是objectName指定的值
后代选择器	QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton，不管是直接的，还是间接的
子选择器	QDialog>QPushButton,匹配所有的QDialog容器中包含的QPushButton，其中要求QPushButton的直接父类容器是QDialog

另外，上面所有的选择器可以联合使用，并且支持一次设置多种选择器类型，用逗号隔开，例如

#framecut，#frameInterrupt，#frameJoin {color：red}
表示这些ID使用的都是一个规则

#mytable QPushButton {color：red}
表示选择所有ID为mytable的容器中包含的QPushButton