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表示鼠標在上面且被選中