pyqt5中样式(qss)的介绍

本章节介绍如何在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表示鼠标在上面且被选中