PyQt5中QSS设置全局StyleSheet的学习

这阵子在学习PyQt5,在学习过程中查阅很多资料和网站内容。现在希望一边学习,一边作笔记,并分享在互联网上,能够给别人带来方便的同时自己也提升得更快。


这篇博文主要总结PyQt5中QSS的使用方法和存在的一些问题


先新建一段代码初始化一个UI

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication, QPushButton, QTextBrowser, QWidget, QFrame


class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        TextBr = QTextBrowser(self)
        TextBr.setGeometry(400, 300, 300, 100)
        TextBr.setText('Test')
        btn = QPushButton('btn', self)
        frm = QFrame(self)
        frm.setGeometry(100, 0, 100, 100)
        self.setGeometry(300, 200, 1000, 500)
        self.setWindowTitle('QSS learning')
        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

得到下面的窗口
PyQt5中QSS设置全局StyleSheet的学习_第1张图片
我们的代码中总共有4个UI对象,一是ex = Example()所产生的QWidget,二是TextBr,三是btn,四是frm。在窗口中,由于frm没有被设置内容而不可见。


接下来,我们在代码中添加一行代码来设置StyleSheet,修改的代码片段如下:

        self.setWindowTitle('QSS learning')
        self.setStyleSheet('QWidget{background-color:rgb(0,0,0)}') #增加的代码
        self.show()

此时运行程序出现的效果是
PyQt5中QSS设置全局StyleSheet的学习_第2张图片

self.setStyleSheet('QWidget{background-color:rgb(0,0,0)}')

self指的是我们所建立的ex = Example(),在这个继承于Qwidget的类被初始化时,在initUI还新建了TextBr,btn和frm三个对象。所以self.setStyleSheet()是可以设置ex整个窗口的样式(StyleSheet)的。而当我们把样式设置成QWidget{background-color:rgb(0,0,0)}时,发现所有四个对象的背景颜色全都设置成了黑色,这其实是我们不想看到的结果。究其原因,是由于QTextBrowser, QPushButton, QFrame这三个类都继承自QWidget的缘故。


接下来,我们将代码再进行更改,将

class Example(QWidget):

中的QWidget更改为QMainWindow

class Example(QMainWindow): #new

并且将

self.setStyleSheet('QWidget{background-color:rgb(0,0,0)}')

中的QWidget也替换掉

self.setStyleSheet('QMainWindow{background-color:rgb(0,0,0)}')

得到效果如下:
PyQt5中QSS设置全局StyleSheet的学习_第3张图片
此时可以看到,TextBr和btn得到保持,而frm依然没有显示出来。所以此时,背景颜色变成黑色的其实只有QMainWindow类型的主窗口ex。


我们紧接着可以对余下的三个类型的对象进行设置

        self.setStyleSheet('QMainWindow{background-color:rgb(0,0,0)}'
                           'QPushButton{background-color:rgb(255,0,0)}'
                           'QFrame{background-color:rgb(0,255,0)}')

我们在同一个设置中增加两段QSS字符串,得到效果如下:
PyQt5中QSS设置全局StyleSheet的学习_第4张图片
在此发现,btn被正确地设置成了红色,而frm也由于被设置成了绿色而变得可见。但没想到的是,TextBr也被设置成了绿色。可以猜测,QTextBrowser是继承自QFrame的。
继续将样式设置代码修改成

        self.setStyleSheet('QMainWindow{background-color:rgb(0,0,0)}'
                           'QPushButton{background-color:rgb(255,0,0)}'
                           'QFrame{background-color:rgb(0,255,0)}'
                           'QTextBrowser{background-color:rgb(0,0,255)}')

增加了对QTextBrowser类的设置后,TextBr终于被设置成了蓝色。
PyQt5中QSS设置全局StyleSheet的学习_第5张图片


通过演示,我们已经知道了设置全局QSS的入口在主窗口的setStyleSheet()函数,在其中添加QSS语法,就可以设置此对象中所有样式。
因为在setStyleSheet()函数中,实际输入的参数是字符串类型,所以完全可以把QSS语法存在文档里,再用程序读取。
而我们需要注意的是,由于在txt等文档中编辑QSS时,实际格式如下:
这里写图片描述
在用python读取时,不会是一个字符串,所以需要一些方法,比如以下代码可以正常读取txt并将内容转化成字符串

        with open('C:\\Users\\Martin\\Desktop\\qss1.txt') as file:
            str = file.readlines()
            str =''.join(str).strip('\n')
        self.setStyleSheet(str)
        self.show()

其中str在从readlines()读取到的数据是以list存在的,并且每行后面会带有\n,所以用str =”.join(str).strip(‘\n’),将内容转换成“干净”的字符串。通过把QSS文件内容读取为字符串这样的思路,我们可以自由发挥,方便地设置窗口UI的整体式样。

你可能感兴趣的:(pyqt5)