Python桌面开发pyqt5—QSS与QDesigner

qss选择器

普通选择器

•   `*`：通配符选择器，匹配所有内容
  

•   `QLabel`：组件选择器，匹配控件对象及其子对象
  

•   `.QLabel`：特定组件选择器，只包含对象本身，不含子对象
  

•   `#name`：名称选择器
    *       需要给定控件名称：`label.setObjectName('name')`
    *       若要对多个名字的控件匹配，可用逗号分隔，如`#name_0,#name_1`
  

•   `[key='val']`：属性选择器，注意需要给控件设置属性`setProperty(key, val)`
  

•   `QWidget QLabel`：后代选择器，找到QWidget，再找其中的QLabel
  

•   `QWidget>QLabel`：自带选择器，只会找到QWidget直接包含的QLabel，不找孙子
  

伪类选择器

• 语法：.QPushButton:hover

• 伪状态:

  • hover：鼠标经过
  • pressed：鼠标被按着(只要一直按住就一直触发)
  • checked：被选中
  • unchecked：未选中
  • focus：控件获取焦点
  • enabled：控件有效
  • disabled：控件失效
  • on：控件处于on状态
  • off：控件处于off状态
  • indeterminate：QCheckBox或QRadioBox被选中

• 注意：伪状态可以叠加,如.QPushButton:enabled:hover,表示被激活且鼠标悬停时的选择器

  QPushButton {}
  QPushButton:enabled:hover {
      background-color: red;
  }
  QPushButton:enabled {
      background-color: green;
  }
  

子控件选择器

子控件选择器，对包含多个控件的控件选择其中的一部分

• QCheckBox::indicator：复选框的方框
• QSpinBox::up-button：步伐调节器上箭头
• QSpinBox::down-button：步伐调节器下箭头

qss样式

宽高

属性	描述	例子
width	宽度	400px
min-width	最小宽度	400px
max-width	最大宽度	400px
height	高度	600px
min-height	最小高度	600px
max-height	最大高度	600px

背景

属性	描述	例子
background-color	背景颜色	cyan
background-image	背景图片	url(./车39.jpg)
background-repeat	背景图片重复策略	no-repeat,repeat x, repeat y, repeat xy
background-position	图片对齐方式	right,top,left,bottom
background-origin	图片贴附的原点	padding
background-clip	裁剪方式	border
background-attachment	图片随滚动条滚动策略	fixed,scroll(默认)

前景

属性	描述	例子
font-family	字体类型	隶书
font-size	字体大小	16px
font-style	字体样式	italic
font-weight	字体粗细	bold
color	字体颜色	#f10215

边框

属性	说明	例子
border-width	边框宽度	2px 4px 6px 8px;
border-style	边框样式	solid;
border-color	边框颜色	blue;
border-radius	圆角	50%;
border-image	边框图片	url(./车39.jpg) 200px round;

• border-style：
  • dotted：点
  • dashed：虚线
  • solid：实线
  • double：双实线
• border-image:
  • stretch：拉伸
  • round：平铺填充
  • repeat：重复，图片可能会被裁剪不完整

• border: 1px solid #f10215;

background-color:qconicalgradient(cx:0.5,cy:0.5,angle:30,stop:0 red, stop:0.4 gray, stop:1 green);
border-width:2px 4px 6px 8px;
border-style:dotted dashed solid double;
border-top-style:groove;
border-color:red blue;
border-radius:100px;

渐变色

• 线性渐变色：qlineargradient(x1:0,y1:0,x2:1,y2:1,stop:0 red, stop:0.4 gray, stop:1 green)
• 圆形渐变色：qqradialgradient(cx:0.5,cy:0.5,radius:0.3,fx:0.7,fy:0.3,stop:0 red, stop:0.4 green, stop:1 yellow)
• 弧度渐变色：qconicalgradient(cx:0.5,cy:0.5,angle:30,stop:0 red, stop:0.4 gray, stop:1 green)

边距

• margin：外边距，和css一致
• padding：内边距，和css一致

特殊组件

QSpinBox{
    background-color:cyan;
}
QSpinBox::up-button,QSpinbox::down-button {
    width:50px;
    height:50px;
}
QSpinBox::up-button:hover{
    bottom:10px;
}
QSpinBox::down-button:hover{
    top:10px;
}

qrc资源

• 位置：styleSheet -> Add Resource -> 🖊图标

• 新建qrc：📃图标 -> 保存为一个.qrc后缀的文件

• 生成内部资源路径:
  命名

• 路径追加资源:
  选择资源(图片…)