pyqt5中样式的介绍

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