qt 调用qt_material库后自定义进度条样式

最新推荐文章于 2023-01-31 09:13:00 发布

Qredsun

最新推荐文章于 2023-01-31 09:13:00 发布

阅读量8.7k

点赞数

分类专栏： PyQt 文章标签： qt 开发语言

本文链接：https://blog.csdn.net/qq_17328759/article/details/127679085

版权

PyQt 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

背景：

在进行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_())