PyQt5 QSS 样式的使用

2019-11-23

QSS 语法规则

Qss 和CSS 几乎是相同的。都是由选择器(Selector)+声明(Declaration)。使用使用”属性:值”对设置。使用分号分隔数据(“;”),例如.设置背景颜色和字体颜色

QPushButton{
  color:red;
  background-color:red;
}

如何加载QSS到相应的组件中？

调用组件(QWidget)中的setStyleSheet()来设置样式。样式的具有继承，如果对最上层的(QWidget)设置，该QWidget中有相应的组件被选择便会被设置。

QSS 选择器

1、通配选择器: *，

匹配所有控件

2、类型选择器

使用QPushButton,QLineEdit。这种特定的控件类型。
QPushButton 会匹配到QPushButton类和子类的实例。

如果想要几种类型的控件设置相同的样式。可以使用”,”来控制。例如:

1	QPushButton,QLineEdit,QCombox {color:blue}

等价于:

1
2
3

QPushButton {color:blue}
QLineEdit {color:blue}
QCombox {color:blue}

3、属性选择器。

属性选择器是最灵活的，选择颗粒的到某一个单一控件的。例如:

1
2
3

btn = QPushButton(self)
# 设置name属性的值为myBtn
btn.setProperty('name','myBtn')

选中该按钮

# 页面主类
win = WindowDemo()
# 样式
qssStyle = """
  QPushButton[name="myBtn"]{
    background-color:red;
  }
"""
# 设置样式
win.setStyleSheet(qssStyle)
win.show()

设置win中的属性name值为”myBtn”的按钮控件设置背景颜色为红色。

4、类选择器

.QPushButton匹配所有的QPushButton的实列。但是并不会匹配到子类。这要和第二种的类型选择的做区别。这个和CSS选择器不一样

5、ID选择器

#myButton 匹配ID为myButton的控件，控件使用setObjectName("myButton")设置ID值。这个选择器也是最常使用的。

6、后代选择器

QDialog QPushButton{} 匹配QDialog容器中的QPushButton的样式。不管是直间还是间接的。

7、子选择器

QDialog > QPushButton{} 匹配Dialog中包含的QPushButton。其中必须要求QPushButton的直接父容器是QDialog。

联合选择使用

(1) 一次设置多种选择器类型,使用”,”。#frameCut,#frameInterrupt,#frameJoin{}
(2) #mytable QPushButton

QSS子控件

复合控件的样式，例如下拉框的箭头，点击之后下拉列表。例如

1	QComboBox::drop-down { image: url(dropdown.png)}

下拉的图片为:dropdown.png

QSS伪装态

伪装态选择器，冒号开头的一个选择表达式。例如:QComboBox:hover{}鼠标经过的样式。
QComboBox::drop-down:hover{background-color:red;}复合控件下拉鼠标覆盖样式。:!hover没有覆盖。

应用页面背景设置

方法一使用QSS设置窗口背景

(1) 设置背景图片

win = QWidget()
win.setWindowTitle("界面背景图片设置") 
win.resize(350,  250)  
win.setObjectName("MainWindow")
win.setStyleSheet("#MainWindow{border-image:url(./images/bg.jpg);}")

(2) 设置背景颜色
win.setStyleSheet("#MainWindow{background-color: yellow}")

方法二使用QPalette(调色板)设置窗口背景

(1) 设置背景图片

1
2
3

palette = QPalette()
palette.setBrush(QPalette.Background,QBrush(QPixmap("./images/python.jpg")))
win.setPalette(palette)

注意:
当窗口宽高 < 图片宽高部分显示图片内容。
当窗口宽高 > 图片宽高图片重复填充。
(2) 设置背景颜色

1
2
3

palette = QPalette()
palette.setColor(QPalette.Background, Qt.red )
win.setPalette(palette)

方法三使用painEvent 设置窗口背景

通过重写painEvent方法来设置窗口的背景或者图片
(1) 设置背景图片

def paintEvent(self,event):
    painter = QPainter(self)
    pixmap = QPixmap("./images/screen1.jpg")
  #绘制窗口背景，平铺到整个窗口，随着窗口改变而改变
    painter.drawPixmap(self.rect(),pixmap)

(2) 设置背景色

def paintEvent(self,event):
  painter = QPainter(self)
  painter.setBrush(Qt.yellow)
  # 设置背景颜色
  painter.drawRect(self.rect())

不规则窗口的显示

不规则窗口才是美化应用界面，更加随心所欲的设置窗口的关键

setMask()给窗口/组件设置蒙版

可以使用setMask(self,QBitmap)和setMask(self,QRegion)。通过重写painEvent()函数来设置蒙版。Qbitmap获得的是一个二值化后的图像。其中为1白色会不显示，黑色0显示。设置完蒙版的图片之后，再添加背景图片可以完成相应不规则窗体。
蒙版如下:

白色的部分会被镂空(透明)。黑色的部分会正常显示。
设置蒙版

1
2
3

self.pix = QBitmap( "./images/mask2.png" )
self.resize(self.pix.size())       
self.setMask(self.pix)

运行之后的结果:

白色部分会显示桌面的图片
想要什么样的不规则的窗口，只需要设置相应的不规则蒙版才行。

设置控件蒙版之后拖动失效，需要重写鼠标相应的函数

通用的重写

#重定义鼠标按下响应函数mousePressEvent(QMouseEvent)和鼠标移动响应函数mouseMoveEvent(QMouseEvent)，
#使不规则窗体能响应鼠标事件，随意拖动。
def mousePressEvent(self, event):
  if event.button() == Qt.LeftButton:
      self.m_drag=True
      self.m_DragPosition=event.globalPos()-self.pos()
      event.accept()
      self.setCursor(QCursor(Qt.OpenHandCursor))
  if event.button()==Qt.RightButton:  
      self.close()
def mouseMoveEvent(self, QMouseEvent):
    if Qt.LeftButton and self.m_drag:
        # 当左键移动窗体修改偏移值
        self.move(QMouseEvent.globalPos()- self.m_DragPosition )
        QMouseEvent.accept()
def mouseReleaseEvent(self, QMouseEvent):
    self.m_drag=False
    self.setCursor(QCursor(Qt.ArrowCursor))

半透明的样式

设置窗口半透明可以使用setWindowOpacity()来设置。如果想要组件有相应的颜色并且半透明，可以使用样式来设置。例子的总体效果如下

一、椭圆的窗口样式

使用setMask来设置椭圆的样式。蒙版样式如下:

二、半透明按钮样式

通过使用rgb的透明分量来设置按钮的样式的半透明和颜色background-color: rgb(255, 255, 255,0.5);。椭圆使用border-radius:5px;
鼠标覆盖按钮和按下按钮时的透明度改变。样式如下

style = """
        QPushButton{
            border-radius:5px;
            background-color: rgb(255, 255, 255,0.5);
            color:black;
        }
        QPushButton:hover{
            border-radius:5px;
            background-color: rgb(255, 255, 255,0.7);
            color:black;
        }
        QPushButton:Pressed{
            border-radius:5px;
            background-color: rgb(255, 255, 255,0.9);
            color:black;
        }
        """

三、退出按钮覆盖的时候会变红

核心，鼠标覆盖按钮的时候，改变按钮的背景图片。

exit_btn_style ="""
      QPushButton{
          border-image: url(./image/close.png);
      }
      QPushButton:hover{
          border-image: url(./image/close-hover.png);
      }
      """