PyQt样式设计

QSS

QSS(Qt Style Sheets)即PyQt样式表,是用来定义控件外观的一种机制。QSS内部实现大量参考了CSS,但是功能没有CSS强大,主要体现在选择器少,属性少等。

使用QSS

格式:控件.setStyleSheet(str)

说明:str表示QSS样式

例子:button.setStyleSheets('background-color: red')

QSS语法

基本规则

QSS文件由一系列的“属性:值”对,使用分号间隔,使用大括号将声明包括在内。

选择器

通配选择器:*,匹配所有的控件

类型选择器:QPushButton,匹配所有QPushButton类及其子类

属性选择器:QPushButton[name='myButton'],匹配所有name是myButton的QPushButton实例,匹配的属性可以是自定义属性

类选择器:.QPushButton,匹配所有QPushButton类实例,但是不匹配子类

ID选择器:#myButton,匹配所有ID是myButton的控件,ID指的是objectName,通过setObjectName方法设置

后代选择器:QDialog QPushButton,匹配QDialog中包含的QPushButton,不论是直接还是间接包含

子选择器:QDialog > QPushButton,匹配QDialog中包含的QPushButton,要求QPushButton的直接父容器时QDialog 

子控件

子控件实际上也是一种选择器,主要应用在复合组件上,典型的就是QComboBox控件,如指定QComboBox中的下拉箭头为指定图片:

QComboBox::drop-down { image : url(xxx.png) }

伪状态

QSS伪状态是以冒汗开头的一个选择表达式,如:hover表示鼠标滑过时的状态。常用的伪状态有:hover checked 

例子:设置按钮的背景为不同颜色

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton

styleSheet = '''
    #one {
        background-color: red
    }
    
    #two {
        background-color: green
    }
'''

class MyWidget(QWidget):
    def __init__(self):
        super(MyWidget, self).__init__()

        self.button1 = QPushButton(self)
        self.button1.setText('点我1')
        self.button1.resize(100, 40)
        self.button1.move(20, 20)
        self.button1.setObjectName('one')

        self.button2 = QPushButton(self)
        self.button2.setText('点我2')
        self.button2.resize(100, 40)
        self.button2.move(20, 80)
        self.button2.setObjectName('two')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyWidget()
    w.setStyleSheet(styleSheet)
    w.resize(500, 300)
    w.move(300, 300)
    w.setWindowTitle('Simple')
    w.show()
    sys.exit(app.exec_())

 注:除了自己编写样式外,网上有很多质量非常高的QSS样式,直接浏览下载就OK。

posted @ 2020-05-23 20:36  Yong_无止境  阅读(1562)  评论(0编辑  收藏  举报