pyqt5中样式(qss)的介绍4、类选择器,直接是类型选择器前面加.

本章节介绍如何在pyqt5中设置样式,让页面更加美观,如果不熟悉样式的朋友可以先看下前端样式,其实pyqt5中的样式与前端中css样式类似。参考链接

一、在`py`文件中直接使用样式

1、直接单独一个组件定义样式

# 给按钮btn设置样式
self.btn.setStyleSheet('background: cyan; border: none; color: #fff;')

2、设置通用样式(只要是QPushButton按钮的都会设置该样式)

self.setStyleSheet('QPushButton {background: cyan; border: none; color: #fff;}')

3、给组件设置id属性

self.btn1.setObjectName('btn1')
self.setStyleSheet('QPushButton#btn1{color: #f00; font-size: 20px;}')

二、单独定义一个`xx.qss`文件来写样式

注意点:在pyqt5中相同的样式好像只能使用一次,与前端css样式有区别

1、定义样式

QPushButton{
    background: cyan;
    border: none;
    color: #fff;
}

QPushButton:btn1 {
    font-size: 18px;
}

2、在py中引入样式

def init_ui(self):
    self.btn.resize(100, 30)
    self.btn.move(100, 30)
    self.btn1.resize(100, 30)
    self.btn1.move(100, 80)

    self.btn1.setObjectName('btn1')

    with open('./test1.qss', 'r') as f:
        self.setStyleSheet(f.read())

三、定义一个工具方法

在手写代码的时候我们会使用外部样式的方式,但是不可能每次都是使用打开文件、读文件信息的方式进行操作,需要封装一个工具方法

1、新建一个文件qss_tools.py并定义一个类

class QssTools(object):
    """
    定义一个读取样式的工具类
    """

    @classmethod
    def set_qss_to_obj(cls, file_path, obj):
        with open(file_path, 'r') as f:
            obj.setStyleSheet(f.read())

2、使用

import sys
from PyQt5.Qt import *
from qss_tools import QssTools


class Window(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('使用工具方法')
        self.resize(500, 500)
        self.move(400, 200)
        self.btn = QPushButton('按钮', self)
        self.btn1 = QPushButton('按钮一', self)
        self.init_ui()

    def init_ui(self):
        self.btn.resize(100, 30)
        self.btn.move(100, 30)
        self.btn1.resize(100, 30)
        self.btn1.move(100, 80)
		 # 直接使用类方法
        QssTools.set_qss_to_obj('./test1.qss', self)


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

四、关于`pyqt5`中常见的选择器

1、通配符选择器,直接使用*
2、类型选择器(或者叫属性选择器),直接使用组件的类型,比如QLable、QPushButton
3、id选择器,需要使用setObjectName设置id(注意一个页面中只能只有一个相同的id)

4、类选择器,直接是类型选择器前面加.

# 表示全部的QPushButton属性
.QPushButton{
    background: cyan;
    border: none;
    color: #fff;
}

5、属性选择器

1.定义样式

.QLabel[level="error"] {
    color: #f00;
}

.QLabel[level="success"] {
    color: green;
}

.QLabel[level="warning"] {
    color: #f90;
}

2、定义属性及使用样式

import sys
from PyQt5.Qt import *
from qss_tools import QssTools


class Window(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('属性选择器')
        self.resize(500, 500)
        self.move(400, 200)
        self.label1 = QLabel('文本一', self)
        self.label2 = QLabel('文本二', self)
        self.label3 = QLabel('文本三', self)
        self.init_ui()

    def init_ui(self):
        self.label1.move(100, 10)
        self.label2.move(100, 50)
        self.label3.move(100, 100)
		 # 分别设置属性
        self.label1.setProperty('level', 'error')
        self.label2.setProperty('level', 'success')
        self.label3.setProperty('level', 'warning')

        QssTools.set_qss_to_obj('./test1.qss', self)
....

6、后代选择器
7、子选择器
8、子控件选择器

五、关于子控件选择器

关于子控件选择器的认识:用来刷选一个复合控件上的子控件,使用方式(复合控件::子控件)

1、对于QCheckBox和QRadioButton的子控件indicator

QCheckBox::indicator {
    image: url('./checkout1.png');
    width: 20px;
    height: 20px;
}

2、对于QComboBox的子控件drop-down(修改下拉框箭头的样式)
```
QComboBox::drop-down {
	image：url('./dropdown.png');
}
```

六、伪类选择器

1、:checked: 按钮控件被选中
2、:unchecked:按钮控件未被选中
3、:indeterminate:对于checkBox或者redioButton部分选中(三态的时候)
4、:hover:控件被鼠标放上去
5、:pressed:控件被按下
6、:focus:控件获取焦点
7、:disabled:控件禁用
8、:enabled:控件有效的时候
9、:on:控件属于on状态
10、:off: 控件处于off状态
11、关于伪类取反的操作:!checked
12、伪类连接使用:hover:checked表示鼠标在上面且被选中

pyqt5中样式(qss)的介绍

一、在py文件中直接使用样式

二、单独定义一个xx.qss文件来写样式