pyqt5中样式(qss)的介绍

本章节介绍如何在pyqt5中设置样式,让页面更加美观,若是不熟悉样式的朋友能够先看下前端样式,其实pyqt5中的样式与前端中css样式相似。参考连接

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

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

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

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

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

• 三、给组件设置id属性

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

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

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

• 一、定义样式

  QPushButton{
      background: cyan;
      border: none;
      color: #fff;
  }
  
  QPushButton:btn1 {
      font-size: 18px;
  }
  复制代码

• 二、在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())
  复制代码

3、定义一个工具方法

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

• 一、新建一个文件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())
  复制代码

• 二、使用

  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_())
  复制代码

4、关于pyqt5中常见的选择器

• 一、通配符选择器,直接使用*

• 二、类型选择器(或者叫属性选择器),直接使用组件的类型,好比QLable、QPushButton

• 三、id选择器,须要使用setObjectName设置id(注意一个页面中只能只有一个相同的id)

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

  # 表示所有的QPushButton属性
  .QPushButton{
      background: cyan;
      border: none;
      color: #fff;
  }
  复制代码

• 五、属性选择器

  • 1.定义样式

    .QLabel[level="error"] {
        color: #f00;
    }
    
    .QLabel[level="success"] {
        color: green;
    }
    
    .QLabel[level="warning"] {
        color: #f90;
    }
    复制代码

  • 二、定义属性及使用样式

    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)
    ....
    复制代码

• 六、后代选择器

• 七、子选择器

• 八、子控件选择器

5、关于子控件选择器

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

• 一、对于QCheckBox和QRadioButton的子控件indicator

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

• 二、对于QComboBox的子控件drop-down(修改下拉框箭头的样式)

  QComboBox::drop-down {
  	image：url('./dropdown.png');
  }
  复制代码

6、伪类选择器

• 一、:checked: 按钮控件被选中
• 二、:unchecked:按钮控件未被选中
• 三、:indeterminate:对于checkBox或者redioButton部分选中(三态的时候)
• 四、:hover:控件被鼠标放上去
• 五、:pressed:控件被按下
• 六、:focus:控件获取焦点
• 七、:disabled:控件禁用
• 八、:enabled:控件有效的时候
• 九、:on:控件属于on状态
• 十、:off: 控件处于off状态
• 十一、关于伪类取反的操做:!checked
• 十二、伪类链接使用:hover:checked表示鼠标在上面且被选中