QSS结合 对象的名称和属性设置 的使用

QSS结合 对象的名称和属性设置 的使用

QSS（Qt Style Sheets）是Qt框架中一种用于进行界面样式定制的技术，类似于CSS（Cascading Style Sheets）在Web开发中的作用。

QSS允许开发者通过类似于CSS的选择器和属性来定义Qt应用程序的样式，包括控件的颜色、字体、背景和边框等。通过使用QSS，开发者可以方便地改变Qt应用程序的外观和风格，以满足用户的需求和设计要求。

一、针对 控件类型 配置

1. 编写py文件

   '''
       对象的名称和属性设置
   '''
   
   # 0. 导入需要的包和模块
   from PyQt5.Qt import *
   import sys
   
   
   # 1. 创建应用程序对象
   app = QApplication(sys.argv)
   
   # 2. 控件的操作
   # 2.1 创建控件
   window = QWidget()
   
   # 2.2 设置控件
   window.setWindowTitle("测试qss")
   window.resize(400, 400)
   
   #***********测试qss控件
   #设置QSS样式
   with open("test.qss", "r") as f:
       qApp.setStyleSheet(f.read()) # 通过qApp可以设置application的全局属性
   
   label = QLabel(window)
   label.setText("测试qss_1")
   
   #***********测试qss控件
   
   # 2.3 展示控件
   window.show()
   
   # 3. 应用程序的执行, 进入到消息循环
   sys.exit(app.exec_())
   

2. 编写qss文件

   QLabel {
       font-size: 20px;
       color: red;
       border: 1px solid gray;
       border-radius: 8px;
   }
   

   注：这样配置只对 QLabel 类型控件生效。

3. 测试效果
   

二、针对 控件和对象名称 配置

1. 修改py文件

   '''
       对象的名称和属性设置
   '''
   
   # 0. 导入需要的包和模块
   from PyQt5.Qt import *
   import sys
   
   # 1. 创建应用程序对象
   app = QApplication(sys.argv)
   
   # 2. 控件的操作
   # 2.1 创建控件
   window = QWidget()
   
   # 2.2 设置控件
   window.setWindowTitle("测试qss")
   window.resize(400, 400)
   
   # ***********测试qss控件
   # 设置QSS样式
   with open("test.qss", "r") as f:
       qApp.setStyleSheet(f.read())
   
   label = QLabel(window)
   label.setText("测试qss_1")
   
   # 添加一个设置对象名称的控件
   label2 = QLabel(window)
   label2.setObjectName("notice")
   label2.move(100, 100)
   label2.setText("测试qss_2")
   
   # ***********测试qss控件
   
   # 2.3 展示控件
   window.show()
   
   # 3. 应用程序的执行, 进入到消息循环
   sys.exit(app.exec_())
   

2. 修改qss文件

   QLabel {
      font-size: 20px;
      color: red;
      border: 1px solid gray;
      border-radius: 8px;
   }
   
   /*添加notice对象名称*/
   QLabel#notice {
      font-size: 20px;
      color: blue;
      border: 1px solid gray;
      border-radius: 8px;
   }
   
   
   

   注：如此设置当控件只为QLabel时，显示为红色；当控件为QLabel且对象名称为notice时，显示为蓝色。

3. 测试效果
   

三、针对 控件、对象名称和属性设置 配置

1. 修改py文件

   '''
      对象的名称和属性设置
   '''
   
   # 0. 导入需要的包和模块
   from PyQt5.Qt import *
   import sys
   
   # 1. 创建应用程序对象
   app = QApplication(sys.argv)
   
   # 2. 控件的操作
   # 2.1 创建控件
   window = QWidget()
   
   # 2.2 设置控件
   window.setWindowTitle("测试qss")
   window.resize(400, 400)
   
   # ***********测试qss控件
   # 设置QSS样式
   with open("test.qss", "r", encoding="utf8") as f:
      qApp.setStyleSheet(f.read())
   
   label = QLabel(window)
   label.setText("测试qss_1")
   
   # 添加一个设置对象名称的控件
   label2 = QLabel(window)
   label2.setObjectName("notice")
   label2.move(100, 100)
   label2.setText("测试qss_2")
   
   # 添加一个设置对象名称和属性的控件
   label3 = QLabel(window)
   label3.setObjectName("notice")
   label3.setProperty("notice_level", "info")
   label3.move(200, 150)
   label3.setText("测试qss_3")
   
   # ***********测试qss控件
   
   # 2.3 展示控件
   window.show()
   
   # 3. 应用程序的执行, 进入到消息循环
   sys.exit(app.exec_())
   
   

2. 修改qss文件

   QLabel {
      font-size: 20px;
      color: red;
      border: 1px solid gray;
      border-radius: 8px;
   }
   
   /*添加notice对象名称*/
   QLabel#notice {
      font-size: 20px;
      color: blue;
      border: 1px solid gray;
      border-radius: 8px;
   }
   
   /*添加notice对象名称和属性要求*/
   QLabel#notice[notice_level="info"] {
      font-size: 20px;
      color: green;
      border: 1px solid gray;
      border-radius: 8px;
   }
   
   

   注：如此设置当控件只为QLabel时，显示为红色；当控件为QLabel且对象名称为notice时，显示为蓝色；当控件为QLabel、对象名称为notice、属性设置为“notice_level”对应“info”时，显示为绿色

3. 测试效果
   

四、总结

​ 可以使用QSS来控制QT中控件样式，将QSS单独配置成一个文件，这样所有想使用对应样式的窗口都可以独立调用对应的QSS文件，方便样式复用。