QProgressBar 是 PyQt5 裡的進度條元件，這篇教學會介紹如何在 PyQt5 視窗裡加入 QProgressBar 進度條，並實做使用進度條顯示目前進度的簡單應用。

原文參考：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_())

更多 Python 教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我已經寫了超過 400 篇 Python 的教學，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Python 網路爬蟲教學
• LINE BOT 教學
• OpenCV 教學
• AI 影像辨識教學