PyQt5样式表

最新推荐文章于 2024-03-21 19:33:40 发布

Mr.Joden

最新推荐文章于 2024-03-21 19:33:40 发布

阅读量3k

点赞数 4

分类专栏： PyQt5 文章标签： qt pyqt python 开发语言

本文链接：https://blog.csdn.net/m0_60633107/article/details/127127897

版权

PyQt5 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

简要

全称Qt Style Sheet，简称qss，即Qt样式表，为可视化控件设置样式；
可以将其类比为css，但没有css强大(选择器少、属性少、有些属性仅适用于部分控件)
设置样式主要通过QWidget_obj.setStyleSheet(qss)来实现

设置样式

QWidget.setStyleSheet(qss_str)：仅对控件本身及其子控件作用
app.setStyleSheet(qss_str)：调用QApplication对象，全局设置默认样式，作用于所有应用程序控件

设置对象名称

通过给控件设置"对象名称"，可以使qss作用于对应对象名称的控件上;
需要注意的是对象名称【不唯一】，可以给多个控件设置【相同的】"对象名称"
1. 设置对象名称：QWidget.setObjectName(objName: str)
2. 根据控件类型和对象名称进行qss设置：app.setStyleSheet("QWidget#ObjName{ qss_str }")

抽离qss为文件

1、如果qss语句过多，直接在放在py代码不利于查看，且影响简洁；

2、所以一般把qss语句写到后缀为【*.qss】的文件里，
   然后再在py代码中读取使用，
   当然还可以把读取使用qss逻辑抽离为一个独立的方法,如下：

class MyTools:
    """设置qss给指定控件"""
    @staticmethod
    def setQssToObj(file,obj):
        with open(file,'r') as f:
            file_qss = f.read()
        obj.setStyleSheet(file_qss)

qss选择器

简要：

解决qss作用于谁的问题；
学习分类：通配符选择器、类型选择器、类选择器、ID选择器、属性选择器、后代选择器、子选择器、子控件选择器

通配符选择器：

用于【匹配所有控件】，用于共性样式设置
精确级别：无

举例：
/* 在test.qss中【注释内容】 */
*{
    background-color:gray;
}

类型选择器：

类型即控件类型，作用于【指定类控件】及其【子类控件】
精确级别：类包括

举例：
/* 在test.qss中【注释内容】 */
QAbsractButton{
    background-color:pink;
}

类选择器：

类即控件类，作用于【指定类控件】
精确级别：类
举例：
/* 在test.qss中【注释内容】 */
.QPushButton{
    background-color:cyan;
}

名称选择器：

通过setObjectName(name_str)设置控件名称，作用于指定名称的控件(注意名称不唯一，不同控件可有相同名称)
精确级别：名称

举例：
/* 在test.qss中【注释内容】 */
#btn1{
    background-color:yellow;
}

QPushButton#btn2{
    background-color:blue;
}

属性选择器：

作用于有指定"属性名"或"属性名和值"的控件
精确级别：属性


举例1：
----------------------------------------------
#在test.py中
label1 = QLabel('err',window)
label2 = QLabel('normal',window)
label1.setProperty('attrName','err_value')
label2.setProperty('attrName','normal_value')
label1.move(300,50)
label2.move(300,100)

/* 在test.qss中 */
.QLabel[attrName]{
    background-color: lightblue;
}
----------------------------------------------

举例2：
----------------------------------------------
/* 在test.qss中 */
.QLabel[attrName='err_value']{
    border:5px solid red;
}

.QLabel[attrName='normal_value']{
    border:5px solid green;
}
----------------------------------------------

所属选择器：

即有一定所属关系的控件，作用于所属某父控件的控件(所属关系可直接即父子，可间接如爷子)
精确级别：所属关系


举例：
# 在test.py中
dialog = QDialog(window)
dialog.setObjectName('dlg')
label = QLabel(dialog)
btn = QPushButton('click me',label)
dialog.show()

/* 在test.qss中 */
QDialog#dlg QPushButton{
    background-color: orange;
}

子选择器：

即有直接父子关系的控件，作用于指定有指定父控件的子控件(区别于所属选择器，是直接关系)
精确级别：父子关系

举例：
# 在test.py中
dialog = QDialog(window)
btn = QPushButton('click me',dialog)
dialog.show()

/* 在test.qss中 */
QDialog#dlg>QPushButton{
    background-color: orange;
}

元素选择器：

用的比较少
仅适用于复合控件(包含多个元素)，作用于复合控件的指定子元素。其中相关元素参数是固定的，可自行参考官方文档。
精确级别：复合元素


举例：
# 在test.py中
cb = QComboBox(window)

/* 在test.qss中 */
QComboBox::dropdown{
    background-color:yellow;
}

多选择器使用：

即多个选择器使用同一组qss，作用于选择器控件


举例：
# 在test.py中
label = QLabel('hello',window)
btn = QPushButton('click me',window)
btn.setObjectName('btn1')

/* 在test.qss中 */
QLabel,#btn1{
    background-color:pink;
}

qss伪状态

伪状态即由控件本身相关特性触发的状态，非正常状态；
通过设置伪状态，限制控件只能在某种状态下被样式表作用；
形式即： 选择器:伪状态{qss_str}

常见的伪状态：
    hover：鼠标悬停在控件上
    focus：控件获取焦点
    pressed:控件被点击
    checked：button控件被选中
    unchecked：button控件未被选中
    indeterminate：checkBox/radioButton按钮被选中
    on：控件处于on状态
    off：控件处于off状态
    disable：控件失效
    enable：控件有效


使用举例：
/* 在test.qss中 */
QPushButton:clicked{
    background-color: orange;
}

qss样式值

简要：

即可以为控件设置的具体样式值
学习分类：盒子模型、边框、外边距

盒子模型：

如上图所示，每个控件都是盒子模型的，通过设置盒子模型的不同参数值，来达到目标样式效果

边框：

1. 边框总设置
    border: width(px)、linestyle、color

    width：即边框线的粗细
    style：即线条样式
    color：即线条填充色

    style可选值:
        solid：实线
        none：无线条
        dotted：点状线
        dashed：虚线
        double：双线
        groove：槽线

2.设置linestyle样式：
    border-style:style_value
    border-style:top,right,left,bottom
    border-top-style:style_value
    border-right-style:style_value
    border-bottom-style:style_value
    border-left-style:style_value

3. 设置width：
    border-width: int_px  (四周等宽设置)
    border-width: top,right,left,bottom
    
    border-top-width: int_px
    border-right-width: int_px
    border-bottom-width: int_px
    border-left-width: int_px
    一般单位为px，但是也可以为em，且有：1em = 16px
    

3. 设置颜色：
    color_str/rgb(int,int,int)/hex_number：值可以是字符串、rgb、十六进制数值(如：#ffffff)
    border-color: color_str/rgb(int,int,int)/hex_number
    border-color: top,right,left,bottom
    
    border-top-color: color_str
    border-right-color: color_str
    border-bottom-color: color_str
    border-left-color: color_str
    

4. 另加内容：渐变色
    渐变色也是一种颜色参数，若该知识有需要具体自行了解
    线性渐变：
        根据两点确定的直线，来进行线性渐变颜色，stop断点可以设置多个
        qlineargradient(x1：0,y1：0,x2：0,y2：1,stop:0 white,stop:0.5 green,stop:1 blue)
    辐射渐变：
        由一点向外发散的颜色渐变方式
        qradialgradient(cx:0.7,cy:0.7,radius:0.5,fx:0.5,fy:0.5,stop:0 red,stop:1 orange)
    角度渐变：
        由一点和初始角度位置开始逆时针旋转进行颜色渐变
        qconicalgradient(cx:0.5,cy:0.7,angle:10,stop:0 red,stop:1 yellow)
        

5. 圆角：
    border-radius:int_px
    border-top-left-radius:int_px
    border-top-right-radius:int_px
    border-bottom-left-radius:int_px
    border-bottom-right-radius:int_px

6. 图片边框：
    把图片裁剪成一个边框来实现图片边框，需要结合设置border-width来使用
    参数：图片url(直接写路径不用再加引号)、四个方向向内的裁剪值、图片填充策略
    填充策略的可选值：
        round：平铺
        repeat：重复
        stretch：拉伸
        
    border-image:url(img_path) int_px int_px int_px int_px fill

外边距：

Margin区域在border外，用于调节控件相对于父控件的位置


margin: int_px(设置左上边距)
margin:top,right,bottom,left(位置以左上数值为基准)

margin-left:int_px
margin-right:int_px
margin-top:int_px
margin-bottom:int_px

内边距：

Padding区域位于border和content之间，设置padding，将会缩小content区域，从而影响内容的位置改变

padding:int_px
padding:top,right,right,left

padding-left:int_px
padding-right:int_px
padding-top:int_px
padding-bottom:int_px

背景：

background-color:color
    设置背景颜色
    
background-image:url(path)
    设置背景图片
    
background-position:设置背景图片显示的位置
    top 
    left
    bottom
    right
    center
    
background-origin:设置背景图片的起始区域
    padding：
    border：
    margin:
    content：受padding影响(可以用来抠图显示背景)
    
background-clip:设置背景裁剪的区域
    padding：
    border：
    margin：
    content：
    
background-repeat:背景图片是否重复填充
    no-repeat:不重复
    repeat-x:水平重复
    repeat-y:竖直重复
    repeat-xy:水平和竖直重复
    
    
background-attachment:
    是否跟随控件多余部分滚动而滚动
    scroll：滚动
    fixed：固定不动

字体：

font-family:
    设置字体家族
    隶书、宋体、黑体
    
font-size:int_px
    设置字体尺寸
    
font-style:
    设置字体样式
    normal：正常
    italic：斜体
    oblique：偏斜

font-weight：
    设置字体粗细
    bold：粗体
    bolder：更粗
    lighter：更细
    int：具体数值粗细
    

color：
    设置前景色颜色(字体颜色)

尺寸约束：

width:int
height:int
min-width:int
min-hight:int
max-width:int
max-height:int

子控制：

结合元素选择器，能改变复合控件的元素位置
subcontrol-position:
    left、top、right、bottom、center
subcontrol-orign:
    padding、border、margin、content

位置控制：

通过使用【position+方位偏移量】来实现控件位置摆放

position:
    relative：相对位置
    absolute：绝对位置


left：int_px 左偏移量
top：int_px  上偏移量
right：int_px    右偏移量
bottom：int_px   下偏移量

其他样式值：查看官网https://doc.qt.io/qt-5/stylesheet-reference.html，另外地还有第三方样式库(如：qdarkgraystyle)

级联和冲突：

级联：
    qss可以设置给QApplication、父控件、子控件
    一个控件的最终样式，会受父控件和QApplication样式的影响

冲突：
    如果一个控件，作为后代控件，被多个祖先控件控制，
    那么不同属性会求并集叠加，相同属性则会覆盖(就近原则【控件关系】、精准原则【选择器】)