QProgressBar 进度条

QProgressBar 是 PyQt5 里的进度条元件，这篇教学会介绍如何在 PyQt5 视窗里加入 QProgressBar 进度条，并实做使用进度条显示目前进度的简单应用。

快速导览：

• 加入 QProgressBar 进度条
• QProgressBar 样式设定
• QProgressBar 进度文字设定
• QProgressBar 常用方法
• 点击按钮增加进度
• 改用 class 的写法

• PyQt6 版本参考：PyQt6 教学 - QProgressBar 进度条
• 因为 Google Colab 不支援 PyQt5，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

加入 QProgressBar 进度条

建立 PyQt5 视窗对象后，透过 QtWidgets.QProgressBar(widget) 方法，就能在指定的元件中建立进度条。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

bar = QtWidgets.QProgressBar(Form)
bar.move(20,20)
bar.setRange(0, 100)    # 進度條範圍
bar.setValue(50)        # 進度條預設值

Form.show()
sys.exit(app.exec_())

QProgressBar 样式设定

透过 setStyleSheet() 方法，可以使用类似网页的 CSS 语法设定 QProgressBar 样式，下方的程序码执行后，会将两个 QProgressBar 设定为不同样式 ( QProgressBar::chunk 表示目前进度条位置，width 设定为 1 )，根据操作系统的不同，例如 MacOS 要在设定样式后，才会出现进度百分比的文字。

from PyQt5 import QtWidgets, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

bar1 = QtWidgets.QProgressBar(Form)
bar1.move(20,20)
bar1.setRange(0, 100)
bar1.setValue(50)
bar1.setStyleSheet('''
    QProgressBar {
        border: 2px solid #000;
        border-radius: 5px;
        text-align:center;
        height: 50px;
        width:80px;
    }
    QProgressBar::chunk {
        background: #09c;
        width:1px;
    }
''')

bar2 = QtWidgets.QProgressBar(Form)
bar2.move(120,20)
bar2.setRange(0, 100)
bar2.setValue(50)
bar2.setStyleSheet('''
    QProgressBar {
        border: 2px solid #000;
        text-align:center;
        background:#aaa;
        color:#fff;
        height: 15px;
        border-radius: 8px;
        width:150px;
    }
    QProgressBar::chunk {
        background: #333;
        width:1px;
    }
''')

Form.show()
sys.exit(app.exec_())

QProgressBar 进度文字设定

QProgressBar 提供三种文字的显示格式，透过三种文字显示格式，能让进度条的显示更多变化。

下方的程序码执行后，会出现三个不同显示格式的进度条。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

style = '''
    QProgressBar {
        border: 2px solid #000;
        border-radius: 5px;
        text-align:center;
        height: 20px;
        width:200px;
    }
    QProgressBar::chunk {
        background: #09c;
        width:1px;
    }
'''

bar1 = QtWidgets.QProgressBar(Form)
bar1.move(20,20)
bar1.setRange(0, 200)
bar1.setValue(50)
bar1.setStyleSheet(style)
bar1.setFormat('%v/%m')

bar2 = QtWidgets.QProgressBar(Form)
bar2.move(20,60)
bar2.setRange(0, 200)
bar2.setValue(50)
bar2.setStyleSheet(style)
bar2.setFormat('%p%')

bar3 = QtWidgets.QProgressBar(Form)
bar3.move(20,100)
bar3.setRange(0, 200)
bar3.setValue(50)
bar3.setStyleSheet(style)
bar3.setFormat('%v')

Form.show()
sys.exit(app.exec_())

QProgressBar 常用方法

下方列出 QSlider 数值调整滑杆的常用方法：

如果将 setValue() 方法中的最小值与最大值设定为“相同数值”，进度条就会呈现“不断加载”的状态。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

style = '''
    QProgressBar {
        border: 2px solid #000;
        border-radius: 5px;
        text-align:center;
        height: 20px;
        width:200px;
    }
    QProgressBar::chunk {
        background: #09c;
        width:1px;
    }
'''

bar = QtWidgets.QProgressBar(Form)
bar.move(20,20)
bar.setRange(0, 0)       # 兩個數值設定相同
bar.setValue(50)
bar.setStyleSheet(style)

Form.show()
sys.exit(app.exec_())

点击按钮增加进度

下方的程序码执行后，会在画面中增加两颗按钮，一颗按钮按下时会增加进度，另外一颗按钮按下时则会重设进度。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

style = '''
    QProgressBar {
        border: 2px solid #000;
        border-radius: 5px;
        text-align:center;
        height: 20px;
        width:200px;
    }
    QProgressBar::chunk {
        background: #09c;
        width:1px;
    }
'''

bar = QtWidgets.QProgressBar(Form)
bar.move(20,20)
bar.setRange(0, 200)
bar.setValue(0)
bar.setStyleSheet(style)

n = 0
def more():
    global n
    n = n + 10
    bar.setValue(n)      # 增加進度

def reset():
    global n
    n = 0
    bar.reset()          # 重設進度

btn1 = QtWidgets.QPushButton(Form)   # 增加進度按鈕
btn1.move(20,60)
btn1.setText('增加進度')
btn1.clicked.connect(more)

btn2 = QtWidgets.QPushButton(Form)   # 重設進度按鈕
btn2.move(110,60)
btn2.setText('重設')
btn2.clicked.connect(reset)


Form.show()
sys.exit(app.exec_())

改用 class 的写法

上方的程序码，亦可改用 class 的写法表示。

from PyQt5 import QtWidgets
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.n = 0
        self.ui()

    def ui(self):
        style = '''
            QProgressBar {
                border: 2px solid #000;
                border-radius: 5px;
                text-align:center;
                height: 20px;
                width:200px;
            }
            QProgressBar::chunk {
                background: #09c;
                width:1px;
            }
        '''

        self.bar = QtWidgets.QProgressBar(self)
        self.bar.move(20,20)
        self.bar.setRange(0, 200)
        self.bar.setValue(0)
        self.bar.setStyleSheet(style)

        self.btn1 = QtWidgets.QPushButton(self)   # 增加進度按鈕
        self.btn1.move(20,60)
        self.btn1.setText('增加進度')
        self.btn1.clicked.connect(self.more)

        self.btn2 = QtWidgets.QPushButton(self)   # 重設進度按鈕
        self.btn2.move(110,60)
        self.btn2.setText('重設')
        self.btn2.clicked.connect(self.reset)

    def showMsg(self):
        self.label.setText(str(self.slider.value()))

    def more(self):
        self.n = self.n + 10
        self.bar.setValue(self.n)      # 增加進度

    def reset(self):
        self.n = 0
        self.bar.reset()          # 重設進度

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec_())

意见反馈