QSS(Qt Style Sheets)即Qt样式表,是用来自定义控件外观的一种机制。QSS大量参考了CSS的内容,但QSS的功能比CSS要弱得多,提现为选择器少,可以使用的QSS属性也少,并且并不是所有的属性都可以应用在PyQt的控件上。QSS使页面美化跟代码层分开,利于维护。

在Qt中为了降低耦合性(与逻辑代码分离),通常定义一个QSS文件,然后编写各种控件的样式,最后使用QApplication或QMainWindow来加载样式,这样就可以让整个应用程序共享同一种样式了。

一、添加.qrc资源文件

新建一个source.qrc的资源文件,文件名称可以自己起,后缀一定是.qrc,内容如下:


<rcc version="1.0">
 <qresource>
 </qresource>
</rcc>


本人使用的PyCharm开发IDE,貌似只能手动创建,我看资料中使用eric开发PyQt5,配置好之后,有窗口可以自动创建资源文件,比较方便。本人最初也是使用eric6开发python,不过由于实在不习惯“Tab”键,就放弃了。-.-


pyqt5 progressBar 美化精度条_qt qss样式模板


当然也可以使用Qt Designer来创建一个新的资源文件,方法很多,大家自己选择:


pyqt5 progressBar 美化精度条_qt 加载多个qss_02


将同样是在资源编辑器里面,我们可以打开我们刚才新建的资源文件,往里面添加资源:


pyqt5 progressBar 美化精度条_pyqt5 自定义控件_03


可以再创建几个资源过滤器,方便我们分类不同的资源类型,比如qss用来存放样式表,pic用来存放图片等等。


pyqt5 progressBar 美化精度条_qt 加载多个qss_04


二、编写QSS文件

新建一个扩展名为.qss的文件,如style.qss,存放目录可以自由选择,然后将其加入资源文件(.qrc)中。


pyqt5 progressBar 美化精度条_pyqt5 自定义控件_05


添加完毕后,查看资源文件,里面的内容已经变为:


<RCC>
 <qresource prefix="qss">
 <file>qss/style.qss</file>
 </qresource>
 <qresource prefix="pic">
 <file>images/bk.jpg</file>
 <file>images/page.jpg</file>
 </qresource>
</RCC>


QSS文件中我们简单写几个样式,内容如下:


QLabel[objectName="cameraLabel"]{
 border-image:url(./images/page.jpg);
}
QPushButton,QLineEdit,QComboBox{
 background-color: azure;
 color:deepskyblue;
}
QPushButton:pressed{
 color:red;
}
QToolTip{
 border:1px solid rgb(45,45,45);
 background:white;
 color:red;
}


关于QSS的语法,大家可以自己在网上找一找,在这里就不详细说明了。

三、转换资源文件

1、使用PyQt5提供的pyrcc5命令将source.qrc文件转换为.py文件。


pyrcc5 source.qrc -o source_rc.py


之所以要添加_rc,是因为Qt Designer导入资源文件时默认是加_rc的,这里为了 与Qt Designer保持一致。

2、也可以在PyCharm中自动转换:


pyqt5 progressBar 美化精度条_qt qss样式模板_06


记得先设置pyrcc命令,同样输出带_rc的格式,Arguments为“$FileName$ -o $FileNameWithoutExtension$_rc.py”,如下图:


pyqt5 progressBar 美化精度条_qt 加载多个qss_07


转换完成后,再同级目录下会多出一个与.qrc文件同名的.py文件。


pyqt5 progressBar 美化精度条_qt 加载多个qss_08


内容如下:


from PyQt5 import QtCore
qt_resource_data = b"
x00x00x00x00

x00x07x22xa9
xff
#省略大量代码
qt_resource_name = b"
#省略大量代码
qt_resource_struct_v1 = b"
#省略大量代码
qt_resource_struct_v2 = b"
#省略大量代码
qt_version = QtCore.qVersion().split('.')
if qt_version < ['5', '8', '0']:
    rcc_version = 1
 qt_resource_struct = qt_resource_struct_v1
else:
    rcc_version = 2
 qt_resource_struct = qt_resource_struct_v2

def qInitResources():
    QtCore.qRegisterResourceData(rcc_version, qt_resource_struct, qt_resource_name, qt_resource_data)

def qCleanupResources():
    QtCore.qUnregisterResourceData(rcc_version, qt_resource_struct, qt_resource_name, qt_resource_data)

qInitResources()


可以看出,该文件已经使用QtCore.qRegisterResourceData进行了初始化注册,所以可以直接引用该文件。

四、导入.py资源文件

在界面文件中,需要使用以下代码直接导入.py资源文件。


import source_rc.py


五、加载QSS

为了方便以后调用,可以编写一个加载样式的公共类CommonHelper,核心代码如下:


class CommonHelper:
 def __init__(self):
 pass
 @staticmethod
 def readQss(style):
 with open(style, 'r') as f:
 return f.read()


然后在主函数中进行加载,核心代码如下:


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainWindow = MainWindow()
    styleFile = './qss/style.qss'
 #换肤时进行全局修改,只需要修改不同的QSS文件即可
 style = CommonHelper.readQss(styleFile)
    mainWindow.setStyleSheet(style)
    mainWindow.show()
    sys.exit(app.exec_())


运行软件后,可以看到界面已经有改变了:


pyqt5 progressBar 美化精度条_qt qss样式模板_09