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

背景：

在进行qt样式美化的时候，调用了qt_material库进行了整体的美化。但是发现他的进度条中没有了当前的进度值信息。

思路：

1. 查看调用qt_material样式后的进度条的样式：

   /*  QProgressBar  */
   
   QProgressBar {
   border-radius: 0;
   background-color: #4f5b62;
   text-align: center;
   color: transparent;
   }
   
   QProgressBar:: chunk {
   background-color: #ffd740;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

2. 确认进度值丢失的与原因:
   color: transparent;

3. 重写进度条样式，去掉color的设置后，我们需要给进度条增加一些新的内容：字体大小、位置、进度条进度的样式

   QProgressBar {
   border-radius: 10;
   background-color: #4f5b62;
   border: 2px solid grey;
   color: #FFFFFF;
   }
   QProgressBar::chunk {
   background-color: #ffd740;
   width: 10px;
   margin: 0.5px;
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

实现效果：

示例代码：

可执行代码：

# -*- 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"{text}
"
        elif "INFO" in text:
            text = f"{text}
"
            self.set_probar_value()
        elif "WARNING" in text:
            text = f"{text}
"
        elif "DEBUG" in text:
            text = f"{text}
"
        else:
            text = f"{text}
"
        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_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172