Python GUI库PyQt5图形和特效样式QSS介绍

Stephenie ·

更新时间:2024-09-20

· 953 次阅读

QSS介绍前言

QSS即Qt样式表，是用来自定义控件外观的一种机制，QSS大量参考了Css的内容，但QSS的功能要比Css弱得多，体现在选择器少，可以使用的QSS属性也少，而且并不是所有的属性都可以应用在PyQt的控件上，QSS使页面美化跟代码层分开，利于维护

QSS的语法规则

QSS的语法规则几乎与CSS相同，QSS样式由两部分组成，其中一部分是选择器（Selector），指定哪些软件会受到影响，另一部分是声明（Declaration），指定哪些属性应该在控件上进行设置，声明部分是一系列的“属性：值”对，使用（；）分割各个不同的属性值对，使用大括号（{}）将所有的声明包括在内，例如

QPushButton{color：red}

表示设置QPushButton类及其子类的所有实例的前景色是红色，其中，QPushButton表示选择器，指定所有的QPushButton类及其子类都会受到影响，注意，凡是继承自QPushButton的子类都会受到影响，这是与Css不同的地方，因为css应用的都是一些标签，没有类的结构，更没有子类的概念，{color：red}则是规则的定义，表示指定前景色是红色

实例：QSS语法规则示范


import sys
from PyQt5.QtWidgets import *
class WindowDemo(QWidget):
  def __init__(self):
    super(WindowDemo, self).__init__()
    #设置窗口标题
    self.setWindowTitle('QSS样式')
    #实例化按钮，设置显示文本
    btn1=QPushButton(self)
    btn1.setText('按钮1')
    # 实例化按钮，设置显示文本
    btn2=QPushButton(self)
    btn2.setProperty('name','btn2')
    btn2.setText('按钮2')
    #添加控件到布局中，设置窗口布局方式
    vbox=QVBoxLayout(self)
    vbox.addWidget(btn1)
    vbox.addWidget(btn2)
    #设置样式；按钮的背景颜色绿色
    # qssStyle = '''
    #  QPushButton[name='btn2']{background-color:green}
    #  '''
    qssStyle = '''
      QPushButton{background-color:green}
      '''
    #加载设置好的样式
    self.setStyleSheet(qssStyle)
if __name__ == '__main__':
  app=QApplication(sys.argv)
  win=WindowDemo()
  win.show()
  sys.exit(app.exec_())

运行效果如下

代码分析

在这个例子中。整个窗口加载自定义的QSS样式，窗口中的按钮背景色都为绿色

首先定义了QSS样式，然后使用setStyleSheet（）函数加载QSS样式，setStyleSheet（）函数本身是QWidget的成员函数，PyQt中的大多数控件都是可以直接通过该函数来设置样式


qssStyle = '''QPushButton{background-color:green}'''#加载设置好的样式
self.setStyleSheet(qssStyle)

还可以使用多个选择器指定相应的声明，使用逗号将各个选择器分离，例如

QPushButton,QLineEdit,QComboBox {color:blue}

它相当于

QPushButton {color:blue}

QLineEdit {color:blue}

QComboBox {color:blue}

QSS选择器类型

QSS选择器有如下几种类型

类型	解析
通配选择器	*, 匹配所有的控件
类型选择器	QPushButton，匹配所有的QPushButton类及其子类的实例
属性选择器	QPushButton[name='mybtn'],匹配所有的name属性是myBtn的QPushButton实例。注意，该属性是可以自定义的，不一定非得是类本身具有的属性

示范；修改上面例子

给btn2设置属性名，代码如下


btn2.setProperty('name','btn2')

修改QSS样式表


#设置样式；按钮的背景颜色绿色
qssStyle = '''QPushButton[name='btn2']{background-color:green}'''

运行程序，效果如下

类型	解析
类选择器	.QPushButton，匹配所有的QPushButton实例，但是不匹配子类，注意，前面有一个点，这是与css类选择器不同的地方
ID选择器	myButton，匹配所有的ID为myButton的控件，这里的id实际上就是objectName指定的值
后代选择器	QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton，不管是直接的，还是间接的
子选择器	QDialog>QPushButton,匹配所有的QDialog容器中包含的QPushButton，其中要求QPushButton的直接父类容器是QDialog

另外，上面所有的选择器可以联合使用，并且支持一次设置多种选择器类型，用逗号隔开，例如

#framecut，#frameInterrupt，#frameJoin {color：red}

表示这些ID使用的都是一个规则

#mytable QPushButton {color：red}

表示选择所有ID为mytable的容器中包含的QPushButton

方箱模型

在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：

空白(margin)、边框(border)、填充(padding)和内容(content)。

对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。

空白区域位于边框外，并且总是透明的。

边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。

填充在边框和内容区域之间提供了空白间隔。

前景与背景

部件的前景色用于绘制上面的文本，可以通过color属性指定。

背景色用于绘制部件的填充矩形，可以通过background-color属性指定。

背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容）。

背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。

如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

该例子中使用的样式表如下所示：


QFrame {
  margin: 10px;
  border: 2px solid green;
  padding: 20px;
  background-color: gray;
  background-image: url(qt.png);
  background-position: top right;
  background-origin: content;
  background-repeat: none;
}

在这个例子中，QFrame四周的空白、边框和填充值都是一样的。

实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：


QFrame {
  margin: 14px 18px 20px 18px;
}

同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。


QFrame {
  margin-top: 14px;
  margin-right: 18px;
  margin-bottom: 20px;
  margin-left: 18px;
}

虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

创建可缩放样式

在默认情况下，通过background-image指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。

如果我们想创建能够随着部件大小自动缩放而不是平铺的背景，我们需要设置一种称之为“边框图片”的东东。

“边框图片”可以通过border-image属性指定，它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘。

当一个部件的边框被填充时，四角的格子通常不会发生变化，而其余的五个格子则可能被拉伸或平铺以填充可用空间。

当指定一个“边框图片”时，除了图片本身，我们还必须指定用来分割九宫格的四条分割线。同时我们还必须指定非边角的格子是应该平铺还是拉伸，以及边框的宽度（用来确定边角格子的大小，防止边角被缩放变形）。

例如，下面的样式表定义了上图中的button：


QPushButton {
  border-width: 4px;
  border-image: url(button.png) 4 4 4 4 stretch stretch;
}

另外，“边框图片”还应该含有alpha通道，以使背景能够在边角处露出来。

控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint()，并在布局时被考虑。

例如：


QPushButton {
  min-width: 68px;
  min-height: 28px;
}

如果该属性没有被指定，最小大小将从部件的内容区域和当前样式中继承。

处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。例如，如果我们想在一个push button在被按下的时候具有sunken的外观，我们可以指定一个叫做 :pressed 的伪状态。


QPushButton {
  border: 2px outset green;
  background: gray;
}
QPushButton:pressed {
  border-style: inset;
}

可用的伪状态列表

伪状态	描述
checked	button部件被选中
disabled	部件被禁用
enabled	部件被启用
focus	部件获得焦点
hover	鼠标位于部件上
indeterminate	checkbox或radiobutton被部分选中
off	部件可以切换，且处于off状态
on	部件可以切换，且处于on状态
pressed	部件被鼠标按下
unchecked	button部件未被选中

使用子部件定义微观样式

许多部件都包含有子元素，这些元素可以称为“子部件”。Spin box的上下箭头就是子部件最好的例子。

子部件可以通过::来指定，例如QDateTimeEdit::up-button。定义子部件的样式与定义部件非常相似，它们遵循前面提到的方箱模型（即它们可以拥有自己的边框、背景等），并且也可以和伪状态联合使用（例如QSpinBox::up-button:hover）。

可用的子部件类型

子部件列表

子部件	描述
::down-arrow	combo box或spin box的下拉箭头
::down-button	spin box的向下按钮
::drop-down	combo box的下拉箭头
::indicator	checkbox、radio button或可选择group box的指示器
::item	menu、menu bar或status bar的子项目
::menu-indicator	push button的菜单指示器
::title	group box的标题
::up-arrow	spin box的向上箭头
::up-button	spin box的向上按钮

通过指定subcontrol-position和subcontrol-origin属性，子部件可以被放置在部件箱体内的任何位置。并且，子部件的位置还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。

相对定位

相对定位适合于子部件具有固定大小的情形（通过width和height指定子部件大小）。使用这种方式，子部件可以以相对于subcontrol- position和 subcontrol-origin属性定义的原始位置进行移动调整。

使用left属性可以把子部件向右移，top属性可以把子部件向左移。

例如：


QPushButton::menu-indicator {
  image: url(menu_indicator.png);
  width: 13px;
  height: 13px;
  subcontrol-origin: padding;
  subcontrol-position: bottom right;
}

当按下按钮时，我们可以把菜单指示器从原来的位置向右下方移动几个像素来模拟按钮按下的状态。


QPushButton::menu-indicator:pressed {
  position: relative;
  top: 2px;
  left: 2px;
}

绝对定位

绝对定位适合于子部件的位置随父部件的变化而变的情形。与前面的例子相同，subcontrol-origin定义了父部件箱体的参考矩形。子部件的矩形区域则可以随后通过相对于这个参考矩形四边的偏移量来定义。


QPushButton::menu-indicator {
  border: 2px solid red;
  subcontrol-origin: padding;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 40px;
}

对于宽度或高度固定的子部件，subcontrol-position被用来说明其在subcontrol-origin指定矩形内的对其方式：


QPushButton::menu-indicator {
  image: url(menu_indicator.png);
  width: 13px;
  subcontrol-origin: padding;
  subcontrol-position: bottom right;
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;

本文先简单介绍下PyQt5的样式QSS，更多关于Python GUI库PyQt5图形和特效样式QSS请查看下面的相关链接

您可能感兴趣的文章:PyQt5实现QLineEdit添加clicked信号的方法在pyqt5中QLineEdit里面的内容回车发送的实例python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法python GUI库图形界面开发之PyQt5线程类QThread详细使用方法python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性python GUI库图形界面开发之PyQt5开发环境配置与基础使用python GUI库图形界面开发之PyQt5信号与槽基本操作python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍python GUI库图形界面开发之PyQt5动态加载QSS样式文件python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例Python GUI库PyQt5样式QSS子控件介绍python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例

Python qss python gui gui pyqt5 pyqt

1024 个赞