背景:
在进行qt样式美化的时候,调用了qt_material库进行了整体的美化。但是发现他的进度条中没有了当前的进度值信息。
思路:
-
查看调用qt_material样式后的进度条的样式:
/* QProgressBar */ QProgressBar { border-radius: 0; background-color: #4f5b62; text-align: center; color: transparent; } QProgressBar:: chunk { background-color: #ffd740; }
-
确认进度值丢失的与原因:
color: transparent;
-
重写进度条样式,去掉color的设置后,我们需要给进度条增加一些新的内容:字体大小、位置、进度条进度的样式
QProgressBar { border-radius: 10; background-color: #4f5b62; border: 2px solid grey; color: #FFFFFF; } QProgressBar::chunk { background-color: #ffd740; width: 10px; margin: 0.5px; }
实现效果:
示例代码:
可执行代码:
# -*- coding:UTF-8 -*-
"""
@ProjectName : pythonProject
@FileName : progress_bar_win.py
@Description: 进度条
@Time : 2022/11/2 17:20
@Author : Qredsun
"""
from PyQt5 import QtCore
from PyQt5 import QtGui
from PyQt5 import QtWidgets
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName("Dialog")
Dialog.resize(420, 146)
Dialog.setMinimumSize(QtCore.QSize(420, 140))
Dialog.setMaximumSize(QtCore.QSize(730, 200))
font = QtGui.QFont()
font.setPointSize(14)
Dialog.setFont(font)
self.gridLayout_2 = QtWidgets.QGridLayout(Dialog)
self.gridLayout_2.setObjectName("gridLayout_2")
self.eventName = QtWidgets.QLabel(Dialog)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.eventName.sizePolicy().hasHeightForWidth())
self.eventName.setSizePolicy(sizePolicy)
self.eventName.setMinimumSize(QtCore.QSize(200, 20))
self.eventName.setMaximumSize(QtCore.QSize(16777215, 40))
font = QtGui.QFont()
font.setPointSize(14)
self.eventName.setFont(font)
self.eventName.setCursor(QtGui.QCursor(QtCore.Qt.CrossCursor))
self.eventName.setObjectName("eventName")
self.gridLayout_2.addWidget(self.eventName, 0, 0, 1, 1)
self.gridLayout = QtWidgets.QGridLayout()
self.gridLayout.setObjectName("gridLayout")
spacerItem = QtWidgets.QSpacerItem(37, 17, QtWidgets.QSizePolicy.Preferred,
QtWidgets.QSizePolicy.Minimum)
self.gridLayout.addItem(spacerItem, 0, 0, 1, 1)
# 修改后的进度条在UI文件中的样子
self.progressBar = QtWidgets.QProgressBar(Dialog)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Fixed)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.progressBar.sizePolicy().hasHeightForWidth())
self.progressBar.setSizePolicy(sizePolicy)
self.progressBar.setMinimumSize(QtCore.QSize(200, 20))
self.progressBar.setMaximumSize(QtCore.QSize(16777215, 40))
self.progressBar.setBaseSize(QtCore.QSize(0, 0))
font = QtGui.QFont()
font.setFamily("Albertus Extra Bold")
font.setPointSize(14)
font.setBold(True)
font.setItalic(False)
font.setWeight(50)
self.progressBar.setFont(font)
self.progressBar.setContextMenuPolicy(QtCore.Qt.NoContextMenu)
self.progressBar.setAutoFillBackground(False)
self.progressBar.setStyleSheet("QProgressBar {\n"
"border-radius: 10;\n"
"background-color: #4f5b62;\n"
"text-align: right;\n"
"border: 2px solid grey;\n"
"color: #FFFFFF;"
"}\n"
"QProgressBar::chunk {\n"
" background-color: #ffd740;\n"
" width: 10px;\n"
" margin: 0.5px;\n"
"}")
self.progressBar.setProperty("value", 24)
self.progressBar.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.progressBar.setTextVisible(True)
self.progressBar.setOrientation(QtCore.Qt.Horizontal)
self.progressBar.setTextDirection(QtWidgets.QProgressBar.TopToBottom)
self.progressBar.setObjectName("progressBar")
self.progressBar.setTextVisible(True)
self.progressBar.setAlignment(QtCore.Qt.AlignRight)
self.gridLayout.addWidget(self.progressBar, 0, 1, 1, 1)
spacerItem1 = QtWidgets.QSpacerItem(37, 17, QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Minimum)
self.gridLayout.addItem(spacerItem1, 0, 2, 1, 1)
self.gridLayout_2.addLayout(self.gridLayout, 1, 0, 1, 1)
self.curEvent = QtWidgets.QLabel(Dialog)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.curEvent.sizePolicy().hasHeightForWidth())
self.curEvent.setSizePolicy(sizePolicy)
self.curEvent.setMinimumSize(QtCore.QSize(200, 20))
self.curEvent.setMaximumSize(QtCore.QSize(16777215, 40))
font = QtGui.QFont()
font.setPointSize(14)
self.curEvent.setFont(font)
self.curEvent.setLayoutDirection(QtCore.Qt.LeftToRight)
self.curEvent.setTextFormat(QtCore.Qt.RichText)
self.curEvent.setAlignment(QtCore.Qt.AlignCenter)
self.curEvent.setObjectName("curEvent")
self.gridLayout_2.addWidget(self.curEvent, 2, 0, 1, 1)
self.retranslateUi(Dialog)
QtCore.QMetaObject.connectSlotsByName(Dialog)
def retranslateUi(self, Dialog):
_translate = QtCore.QCoreApplication.translate
Dialog.setWindowTitle(_translate("Dialog", "配置进度"))
self.eventName.setText(_translate("Dialog", "进度:"))
self.progressBar.setFormat(_translate("Dialog", "%p%"))
self.curEvent.setText(_translate("Dialog", "当前操作"))
from PyQt5 import QtWidgets
from ProgressBar_ui import Ui_Dialog
class Widget(QtWidgets.QDialog, Ui_Dialog):
def __init__(self, progress_bar_info):
super().__init__()
self.setupUi(self)
pbar_max_num = progress_bar_info['max_num']
evnet_name = '{}进度:'.format(progress_bar_info['event_name'])
self.init_progress_bar(pbar_max_num)
self.eventName.setText(evnet_name)
def update_log(self, text):
"""将日志输出到 text widget"""
if not self.isVisible():
return
if "ERROR" in text:
text = f"<font color='red'><b>{text}</font><br>"
elif "INFO" in text:
text = f"<font color='green'>{text}</font><br>"
self.set_probar_value()
elif "WARNING" in text:
text = f"<font color='#00ffff'>{text}</font><br>"
elif "DEBUG" in text:
text = f"<font color='#0489b1'>{text}</font><br>"
else:
text = f"{text}<br>"
self.curEvent.setText(text)
def init_progress_bar(self, max_value):
self.progressBar.setRange(0, max_value)
def set_probar_value(self):
cur_value = self.progressBar.value() + 1
# print(cur_value, self.progressBar.maximum())
if cur_value == self.progressBar.maximum():
self.progressBar.setValue(cur_value)
return
self.progressBar.setValue(cur_value)
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
event_info = {
'max_num': 430,
'event_name': 'ITS web 端配置'
}
w = Widget(event_info)
w.show()
sys.exit(app.exec_())