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

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请查看下面的相关链接

(0)

相关推荐

  • Python GUI库PyQt5样式QSS子控件介绍

    QSS子控件 QSS子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉列表,例如: QComboBox:drop-down {image:url(dropdown.png)} 上面的样式指定所有的QComboBox下拉箭头的图片是自定义的,图片文件为dropdown.png ::drop-down子控件选择器可以与上面提到到的选择器一起联合使用,例如 QComboBox#myQComboBox

  • python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例

    窗口背景主要包括,背景色与背景图片,设置窗口背景有三种方法 使用QSS设置窗口背景 使用QPalette设置窗口背景 实现PainEvent,使用QPainter绘制背景 QSS设置窗口背景 在QSS中,我们可以使用Background或者background-color的方式来设置背景色,设置窗口背景色之后,子控件默认会继承父窗口的背景色,如果想要为控件设置背景图片或图标,则可以使用setPixmap或则setIcon来完成.关于这两个函数的用法,可以参考本博客下的PyQt5的基础控件分栏 实

  • python GUI库图形界面开发之PyQt5动态加载QSS样式文件

    在Qt中经常需要使用样式,为了降低耦合性(与逻辑代码分离),我们通常会定义一个QSS文件,然后编写各种控件(QLabel,QLIneEdit,QPushButton等)的样式,最后使用QApplication或QMainWindow来加载样式,这样就可以让整个应用程序共享一种样式了 编写QSS 首先新建一个扩展名为.qss的文件,如style.qss,然后将其加入资源文件(.qrc)中,在style.qss文件中编写样式代码,例如 QMainWindow{ border-image:url(./

  • python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法

    本文主要列出来python图形开发GUI库pyqt5的窗体,控件属性与方法如果你想看看python图形开发GUI库pyqt5的基础使用方法可以查看我们的另一篇文章 python图形开发GUI库pyqt5的基本使用方法详解 基本框架 import sys from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * class Demo(QWidget): def __init__(self):

  • python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例

    在默认情况下,我们使用PyQt5创建出来的窗口和部件都是默认的样式,虽然谈不上很丑,但是也毫无美感可言.其实,在PyQt5中,我们可以有较高的自由度来自定义窗口和各种小部件的样式,通过自定义这些样式,以达到美化图形界面的目的. 本篇文章中,我们就通过一个实际的例子,使用QSS和PyQt5的配置属性,实现图形用户界面的美化工作. 首先上效果图: 一.对界面进行布局和组件的布置 在图像界面编程中,一个好的布局有助于全局把控界面的形态,而在PyQt5中,有多种布局的方式供我们选择,比较常用的布局有以下

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

    QSS介绍前言 QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器少,可以使用的QSS属性也少,而且并不是所有的属性都可以应用在PyQt的控件上,QSS使页面美化跟代码层分开,利于维护 QSS的语法规则 QSS的语法规则几乎与CSS相同,QSS样式由两部分组成,其中一部分是选择器(Selector),指定哪些软件会受到影响,另一部分是声明(Declaration),指定哪些属性应该在控件上进行设置,声明部分是一系列的"属

  • python GUI库图形界面开发之PyQt5线程类QThread详细使用方法

    QThread是Qt的线程类中最核心的底层类.由于PyQt的的跨平台特性,QThread要隐藏所有与平台相关的代码 要使用的QThread开始一个线程,可以创建它的一个子类,然后覆盖其它QThread.run()函数 class Thread(QThread): def __init __(self): super(Thread,self).__ init __() def run(self): #线程相关的代码 pass 接下来创建一个新的线程 thread = Thread() thread

  • python图形开发GUI库pyqt5的基本使用方法详解

    一:安装PyQt5 pip install pyqt5 如果你的系统没有安装pip请阅读我们的另一篇文章 windows下python安装pip方法详解 二:PyQt5简单使用 #!/usr/bin/python3 # -*- coding: utf-8 -*- """ Py40.com PyQt5 tutorial In this example, we create a simple window in PyQt5. author: Jan Bodnar website:

  • python GUI库图形界面开发之PyQt5拖放控件实例详解

    本篇,我们学习PyQt5界面中拖放(Drag 和Drop)控件. 拖放动作 在GUI中,拖放指的是点击一个对象,并将其拖动到另一个对象上的动作.比如百度云PC客户端支持的拖放文件以快速移动文件: 拖放动作能够很直观很方便的在GUI程序中完成一些很复杂或繁琐的操作. 在PyQt中实现拖放 在PyQt5中,我们也可以很轻松地使用拖放功能. 使用Qt设计师或者使用API都可以实现.我们先使用Qt设计师将GUI的图形设计出来,在之前的GUI的基础上,我们新建一个选项卡. 我们新建了一个选项卡,然后在里面

  • python GUI库图形界面开发之PyQt5开发环境配置与基础使用

    PyQt5安装 在cmd下输入 pip install PyQt5 完成PyQt5安装,再安装qt designer,可以使用pip安装 pip install PyQt5-tools 安装完成后,在python安装目录下可以看到 配置PyCharm 配置PyCharm是为了在Pycharm里面实现打开qt designer,然后生成qt文件,然后将qt文件转换成python语言的软件文件. 打开Pycharm,按下图操作 打开Extrernal Tools之后,点击上如绿色的+,添加Tools

  • python GUI库图形界面开发之PyQt5信号与槽基本操作

    信号与槽基本操作 进入Qt Designer,加入控件,本文以按钮为例. 按F4开始后,选择需要加入信号与槽的按钮,如下图所示该按钮会变红,按住鼠标拉出一条红线,若该按钮需控制旁边的label,则红线连接到label上(图1),若对框体(MainWindow)进行操作,则链接到框体上,会出现一个像物理中"地线"似的符号(图2). 图1 图2 连接后,会弹出如下窗体(图3),左侧界面选择信号,如下图中选择"clicked()"代表点击按钮触发右侧对应槽的操作. 勾选下

  • python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍

    信号和槽机制是 QT 的核心机制,要精通 QT 编程就必须对信号和槽有所了解.信号和槽是一种高级接口,应用于对象之间的通信,它是 QT 的核心特性,也是 QT 区别于其它工具包的重要地方. 在linux.windows等 GUI 工具包中,GUI组件都会注册回调函数用于处理组件所触发的动作,通常是注册对应的函数的函数指针.在之前关于Button的文章中提到了信号与槽的机制的使用,通过该机制可以很好的将组件的信号(如button的clocked.toggled.pressed等)和处理该信号的槽关

随机推荐