86.样式表 QSS

最新推荐文章于 2024-06-10 11:02:31 发布

Suyuoa

最新推荐文章于 2024-06-10 11:02:31 发布

阅读量1.2k

点赞数 1

分类专栏： Pyqt5笔记

本文链接：https://blog.csdn.net/potato123232/article/details/119177470

版权

Pyqt5笔记专栏收录该内容

79 篇文章 97 订阅

订阅专栏

qss和css差不多，是css的弱化版

我们起始先搞一个Box1和Box2,然后分别设置背景颜色

1 回顾setStyleSheet()

2 回顾背景颜色 background-color

8.1 checked与unchecked

9.5.1 背景颜色 background-color

9.5.2 背景图片 background-image

9.5.3 背景重复 background-repeat

9.5.4 对齐方式 background-position

9.5.5 参照位置 background-origin

9.5.6 background-clip 背景裁剪

9.5.7 background-attachment 背景是否滚动

9.9.1 子控件的对齐方式 subcontrol-position

9.9.2 子控件的参照 subcontrol-Origin

10 第三方库样式表 qdarkgraystyle

11.4.2 右侧的按钮控件与控件中的箭头

1 回顾setStyleSheet()

通过这个方法设置的QSS会作用于控件本身，以及控件所有的子控件

也就是说我如果在box1里直接放一个控件和一个标签它的效果是这样的

现在我们搞一个选择器

我们只对Box1中的按钮控件设置背景颜色

2 回顾背景颜色 background-color

3 认识选择器

这个只是在Box1中进行筛选，我们如果把范围扩大到整个应用程序就应该这样写

这样写之后，应用程序中的所有窗口的所有QPushButton的背景颜色都会设置为青色

也可以让分类器精确定位到一个对象

这个我们必须给指定的控件一个objectName

一个setStyleSheet()可以输入多个QSS

4 qss文件

一般我们会创建一个以qss为尾缀的qss文件

使用其他尾缀不影响运行，但是我们一般都这样规定

我们可以正常输入内容，我们的格式一般这样写

然后设置的时候我们一般这样设置

为了简化代码我们可以在另一个文件中定义一个设置QSS的方法

创建一个名为tool的py文件，然后在其中输入下列内容

然后我们使用的时候首先导入这个tool文件

之后这样写就可以了

5 回顾边框 border

我现在想给按钮加一个边框

第一个是边框宽度，第二个是边框样式，第三个是边框颜色

6 了解伪状态

我们现在搞一个把鼠标放上去更改不同样式的操作

我们现在设置为鼠标放上去它变黑，平时状态为青色

这个是普通状态

鼠标放上去后变成了这样

7 详细讲解选择器

一共有以下这几种选择器

7.1 通配符选择器 *

功能是让被设置控件的所有子控件都有同一个样式，写法是这样写的

如果没有这个通配符也是控件和子控件都设置的

7.2 类型选择器

这个在之前认识选择器的时候就了解过

目的是对控件和子控件输入指定类型的控件设置样式

使用这个是包含子类的，比如说我如果类型选择器选择QWidget，那么QLabel也会被设置为同样的样式

如果现在我不想选择它的子类了，我们这样写

在QLabel的前面加一个.，这样我们就只会选择QLabel了

7.3 ID选择器

这个在之前接处过，在使用选择器前需要给指定的控件一个objectname

用井号来表示

当然我们也可以不用写类别，同样生效

这个时候如果这个objectname用在多个控件中，所有相同名字的控件都会被设置为同样的样式

7.4 属性选择器

这个在使用之前需要设置属性

例如

这个我们做个例子搞一下

当前我们有两个标签

我们设置一下属性和对应的属性值

然后我们qss这样写

然后我们把qss设置给self

生效了

在qss中我们也可以不放属性值，我们现在把有这个属性的全搞一个红色边框

同样生效

如果我们这样设置属性就不行了

7.5 后代选择器

这个一般这样写

这个的意思是选择QDialog中所有的QPushButton控件

这个包括是直接包括和间接包括都算上的，我下面再说一下直接包括和间接包括的意思

比如说我现在有红蓝黄三个控件，红里有蓝，蓝里有黄

红直接包括蓝，红间接包括黄

也可以配合ID选择器使用

qss这样写

设置前是这样的

设置给应用程序

7.6 子选择器

这个只有直接包含时生效，间接包含不生效

我们qss中这样写，用大于号连接父控件和子控件

7.7 子控件选择器

这个使用与组合控件

比如QCheckBox,前面有一个框，后面有一个标签

它这个组合控件里面的每个小控件名字在对应控件中的py文件中查不到，估计是在官网上找的，到时用再说吧，应该用的不多

我用这个QCheckBox举一个例子

我们qss先这样写

设置之后是这样的

现在我们把它改成这样

当然我们也可以在qss后放一个伪状态

当鼠标移上去为青色，其余不变

没移上去

移上去

我又在网上找了一下，这次应该全一点儿

以上的选择器可以在一组qss中并存，例如

8 详细讲解伪状态

图上的控件失效和控件有效写错了，应该是disabled与enabled

之前也介绍过，当控件处于某种状态时把样式设置过去

8.1 checked与unchecked

这个我们用QCheckedBox做测试

qss这样写，没选中时背景为青色，选中时为红色

8.2 indeterminate

checkbox会有第三种状态，我们可以对其进行样式设置

我们再对复选框进行三态设置

8.3 hover与pressed

这个是移动到上面与按下状态，这个我们用QPushButton测试

qss这样写

移动到按钮上

按下按钮

8.4 focus

获取焦点时的状态，我们用QPushButton做测试

qss这样写

运行之后我的这个按钮自动获取到了焦点

我们现在点一下复选框

QPushButton失去焦点后失去样式

8.5 disabled与enabled

disabled是控件被禁用的状态，enabled是可用状态

我们用QCheckBox做测试，qss这样写

我们再使用QPushButton切换复选框是否可用

默认状态下是可用的

点一下按钮1

8.6 on 和 off

on和off 与 checked和unchecked功能相似

我们用复选框做实验，qss这样写

off状态

on状态

8.7 状态注意事项

上面这个图里有一点没说，两个状态可以进行或判定

比如说我qss这样写，就是说复选框处于off状态或hover状态

以上就是常用的状态，如果想用的状态可以去看一下官方文档

9 qss声明

这一部分是指明用什么样式，比如背景颜色和边框

9.1 了解盒子模型

9.2 边框

9.2.1 样式

常用的样式如下所示

分为上下左右四个边框，可以统一设置，也可以分开设置

9.2.1.1 统一设置 border-style

后面只跟一个参数就是统一设置，跟多个参数就是分开设置

由于没有设置宽度，所以我们现在还没有显示出来

我们再设置一个宽度

也可以一起设置四个方向的边框

是按照上右下左的顺序进行设置

9.2.1.2 分开设置

虽然看起来差不多，但是确实是四种风格的边框

9.2.2 宽度

同样可以统一设置和分开设置，我就不一一测试了，写一个例子

在宽度设置中如果只写两个，第一个值代表上下，第二个值代表左右

也可以以em为单位，1em约等于16px

9.2.3 颜色

和前面两个一样，可以统一设置也可以分开设置

参数除了这种颜色的名字，还可以用rgb或16进制表示颜色，这个都可以从网上能找到对应的颜色

9.2.4 渐变色

9.2.4.1 线性渐变

可以明显的看出来它是斜着渐变的，我再搞一下这个图

如果要竖直着变，我们可以将(x2,y2)设置为(1,0)

当然这个也可以搞成背景颜色

我们也可以不添加断点，指定起始点与终止点的颜色就可以

当然也可以使用多个断点

9.2.4.2 辐射渐变

其中cx,cy是中心点的坐标，fx,fy是起始光源点的坐标，radius是辐射范围

多放两个断点可能更好理解一点

如果我们的中心点和光源点在同一点，它就会从中心向外发散

9.2.4.3 角度渐变

cx,cy是中心点，angel是起始的角度(比如说10，就是从10°的时候为红色开始渐变)，后面的起始点和断点的颜色

QLabel { background-color:qconicalgradient(cx:0.5,cy:0.5,angle:10,stop:0 red,stop:0.5 blue,stop:1 orange); }

9.2.5 边框圆角

9.2.5.1 统一设置 border-radius

后面也可以跟四个值，依次是上右下左

如果控件的宽和高相等，设置圆角为高的一半，控件会变为圆形

9.2.5.2 分开设置

这个和之前的那些操作相同，我就不测试了

9.2.6 边框图片

以下方法使用前一定要设置border-width

我们现在想把边框搞成这个图片的样子

首先我们直接把这个图片作为边框图像

由于图片并不是透明的，所以它会遮挡我们的背景颜色

如果要设置的图片很小而要设置的控件大的时候，此时会出现失真的情况，这个时候我们要对图片进行裁剪

我们后面可以加4个整形数据

比如说我们4个值都设置为30，含义依次为，在距离图片上边30像素的地方画一条线，在距离图片右边30像素的地方画一条线，在距离图片下边30像素的地方画一条线，在距离图片左边30像素的地方画一条线

此时我们的图片会被划分为9个部分

我们保持左上角，右上角，右下角，左下角部分不变，其余部分进行后续处理

有三种处理方式，平铺round，拉伸stretch，重复repeat

比如我们现在使用下面这张图作为背景图

拉伸的效果，中间那个渐变不是，四周的是

平铺的效果

重复

重复和平铺的区别是，当尺寸对不上时，重复会截取图片的一部分

重复：不对背景图片做任何调整，铺到哪就是哪
平铺：先计算指定尺寸与背景图片尺寸的关系，然后缩放背景图片，以求一个完整的背景图片

9.3 外边距 margin

我们先不设置margin

没设置是是这样的

现在我们设置margin

也可以用margin连续设置四个数值，分别是上右下左，也可以通过不同的方法，如margin-top分别设置，这个我就不测试了

9.4 内边距 padding

我们先不设置内边距

我们现在设置内边距

也可以用padding连续设置四个数值，分别是上右下左，也可以通过不同的方法，如padding-top分别设置，这个我就不测试了

9.5 背景 background

有以下的东西可以设置

background这个后面可以跟很多参数，比如背景颜色，位置等，可以一起把这些参数添加到这个后面

9.5.1 背景颜色 background-color

后面可以加一个英文单词，也可以加一个rgb()值，也可以加一个十六进制的值

这个之前介绍过，就不在这里测试了

9.5.2 背景图片 background-image

我们现在把之前那张气球的照片作为背景图片

9.5.3 背景重复 background-repeat

我们现在搞一个小个的图作为背景图片

默认情况下会铺满整个控件

我们现在设置为背景不重复

也可以设置为横向重复

或者设置为纵向重复

也可以同时填充x,y方向，这个就是默认值

9.5.4 对齐方式 background-position

我们设置完一张小的图片作为背景图片，且设置不重复，图片是默认摆在左上角的

我们现在想把它放在顶部中间位置

我们也可以将两个参数组合使用，将图片摆放在右上角

9.5.5 参照位置 background-origin

除了参照padding,content,border我们还可以参照margin

9.5.5.1 参照位置为内边距(默认)

参考位置为内边距时，图片会出现在边框内部

现在我们qss这样写

窗口是这样显示的,图片显示在边框内部

9.5.5.2 参考位置为border

现在我们qss这样写

很明显现在图片是卡着边框外部展示的

9.5.5.3 参考位置为content

这样设置图片会在内边距内部进行展示，我们先设置一个内边距，然后设置参考位置，我们的qss这样写

很明显，它是距离我们设置的边框有一段距离，这个距离就是设置的内边距，图片是在内容部分进行展示的

9.5.5.4 参照位置为margin

我们首先设置一个margin，qss这样写

我们发现在控件的上下左右出现了margin的位置

现在我们设置参考位置，qss这样写

现在这个图片就是以margin为基准摆放了

9.5.6 background-clip 背景裁剪

我们可以对下面这种控件，对控件以content进行裁剪

此时我们的背景就裁剪到了只有content部分

其他的我就不测试了

接下来我们会使用上面的方法做一个扑克牌的案例 87.通过qss实现扑克牌的上下左右移动

9.5.7 background-attachment 背景是否滚动

这个使用QTextEdit比较明显

它是这样的，当我们切换到一定行数时，默认会把我们的图片顶掉

我们现在设置为不滚动

这样这个图片就会一直在上面挂着

9.6 文本颜色

9.7 字体

这个和之前搞过的QFont差不多，我们就搞一个例子

我们qss这样写

字体选用华文彩云，字体大小选择60号，字体倾斜，字体加粗

这个文字设置不只应用于label，QPushButton,QTextEdit上面的字也是可以用这个的

9.8 最大最小尺寸

这个一般可以配合布局管理器使用，限制住控件的尺寸

我们就设置一个测试一下

现在我们没设置最小尺寸时是这样的

现在我们设置最小宽度为100px

如果最大值和最小值相同，则会锁定控件大小

9.9 Subcontrol

这个是搞控件中的子控件使用的

我们现在搞一个步长调节器

我们现在先对这个步长调节器进行简单的样式设置

9.9.1 子控件的对齐方式 subcontrol-position

我们现在通过subcontrol-position把控件移动到左侧的中央

9.9.2 子控件的参照 subcontrol-Origin

我们现在把参照改成border

明显这个向上按钮是向左移动了

这个的默认值是padding，可以选border,content,margin作为参数

9.9.3 其余QSpinBox修改

也可以用image把图片换了

也可以用伪状态做个小动画

当鼠标放在按钮上，这个图片就会向上走10像素

如果将鼠标移走就会回到原来的位置

这个bottom也可以改成top,left,right，一共就会有四种不同的效果

这个微调图像的移动就涉及到了两个语句

position:relative 相对控件调整位置
position.absolute 相对控件参照调整位置

比如，下面这个图，红色的圈是我的控件，我的控件起源是border,此时我向下调整20px,如果采用position:relative，控件会移动到绿色圈的位置，如果采用position.absolute，控件会移动到蓝色圈的位置(相对控件参照向下调整20px）

默认情况下是position:relative 相对控件调整位置

9.10 注意事项

如果我对一个控件A的父控件B设置了qss，此时这个qss也作用于控件A，我现在又对控件A设置了样式，此时A接受两个qss，这个情况叫级联，接受了超过两个qss也叫级联，当一个控件接收到了多个qss，就有可能会产生冲突

特异性越强会覆盖掉特异性弱的qss

比如我说小明坐下，全班同学站起来这个时候除了小明的其余学生就会站起来，这个小明就叫特异性

9.10.1 例子1

这个颜色我们改一下，灰色不太明显，我们把他改成青色

9.10.2 例子2

起始为红色

放上去之后为白色

9.10.3 例子3

起始为红色

放上去之后颜色不变

如果这样写放上去就会变白

因为这两个同级，取后者

9.10.4 例子4

这两个qss特异性相同，哪个qss后设置用哪个

10 第三方库样式表 qdarkgraystyle

我们之前把qss声明都学完了，发现如果仅靠自己写还是很难快速设计出好看的样式，这个时候，我们需要借助其他人设计过的样式，一个是从网上找，另一个就是使用qdarkgraystyle

我们首先安装一下

pip install qdarkgraystyle

此时我们简单创建几个控件

我们导入qdarkgraystyle

然后使用

这个页面就变成了黑色的色调

其实也不是很好看

11 其他的QSS声明

11.1 选中时的颜色

11.1.1 背景颜色

应用于QLineEdit或QTextEdit,以及其他可以选中的控件

11.1.2 前景颜色

11.2 圆角还可以这样写

应用于有边框的控件

11.3 通过qss控制密文字符形式

这个2是代表password这个的枚举值

这个65是代表密文字符全为大写A，因为65的ASCII对应的是A

这个有可能能成功，但是在视频里是没有成功的，我记得QLineEdit中有一个设置密文形式的方法，我在这里就不测试了

11.4 QCombox的子控件

11.4.1 下拉菜单

11.4.2 右侧的按钮控件与控件中的箭头

dorp-down是箭头后面的按钮，down-arrow是箭头本身

11.5 QSlider上的子控件

11.5.1 滑动条上面的小滑块

可以对这个小滑块设置图像

Horizontal是伪装态，意思是只有slider为横向时生效

11.5.2 区域

add-page是没有滑过的区域，sub-page是已经滑过的区域

11.6 QPregrossBar进度条

11.6.1 文字对齐方式

11.6.2 走过的部分

Suyuoa

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
1
评论
86.样式表 QSS

qss和css差不多，是css的弱化版我们起始先搞一个Box1和Box2,然后分别设置背景颜色1回顾setStyleSheet()通过这个方法设置的QSS会作用于控件本身，以及控件所有的子控件也就是说我如果在box1里直接放一个控件和一个标签它的效果是这样的现在我们搞一个选择器我们只对Box1中的按钮控件设置背景颜色2回顾背景颜色 background-color3认识选择器这个只是在Box1中进行筛选，我们如果把范围扩大到整个应用程序就应...
复制链接

扫一扫