QProgressBar 進度條
QProgressBar 是 PyQt6 裡的進度條元件，這篇教學會介紹如何在 PyQt6 視窗裡加入 QProgressBar 進度條，並實做使用進度條顯示目前進度的簡單應用。
快速導覽：
因為 Google Colab 不支援 PyQt6，所以請使用本機環境 ( 參考：使用 Python 虛擬環境 ) 或使用 Anaconda Jupyter 進行實作 ( 參考：使用 Anaconda )。
加入 QProgressBar 進度條
建立 PyQt6 視窗物件後，透過 QtWidgets.QProgressBar(widget) 方法，就能在指定的元件中建立進度條。
from PyQt6 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())
class 寫法：
from PyQt6 import QtWidgets
import sys
class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('oxxo.studio')
self.resize(300, 200)
self.ui()
def ui(self):
self.bar = QtWidgets.QProgressBar(self)
self.bar.move(20,20)
self.bar.setRange(0, 100) # 進度條範圍
self.bar.setValue(50) # 進度條預設值
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
Form = MyWidget()
Form.show()
sys.exit(app.exec())
QProgressBar 樣式設定
透過 setStyleSheet() 方法，可以使用類似網頁的 CSS 語法設定 QProgressBar 樣式，下方的程式碼執行後，會將兩個 QProgressBar 設定為不同樣式 ( QProgressBar::chunk 表示目前進度條位置，width 設定為 1 )，根據作業系統的不同，例如 MacOS 要在設定樣式後，才會出現進度百分比的文字。
from PyQt6 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())
class 寫法：
from PyQt6 import QtWidgets
import sys
class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('oxxo.studio')
self.resize(300, 200)
self.ui()
def ui(self):
self.bar1 = QtWidgets.QProgressBar(self)
self.bar1.move(20,20)
self.bar1.setRange(0, 100)
self.bar1.setValue(50)
self.bar1.setStyleSheet('''
QProgressBar {
border: 2px solid #000;
border-radius: 5px;
text-align:center;
height: 50px;
width:80px;
}
QProgressBar::chunk {
background: #09c;
width:1px;
}
''')
self.bar2 = QtWidgets.QProgressBar(self)
self.bar2.move(120,20)
self.bar2.setRange(0, 100)
self.bar2.setValue(50)
self.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;
}
''')
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
Form = MyWidget()
Form.show()
sys.exit(app.exec())
QProgressBar 進度文字設定
QProgressBar 提供三種文字的顯示格式，透過三種文字顯示格式，能讓進度條的顯示更多變化。
| 顯示格式 | 說明 |
|---|---|
| %p | 百分比 |
| %v | 目前數值 |
| %m | 總數值 |
下方的程式碼執行後，會出現三個不同顯示格式的進度條。
from PyQt6 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())
class 寫法：
from PyQt6 import QtWidgets
import sys
class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('oxxo.studio')
self.resize(300, 200)
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.bar1 = QtWidgets.QProgressBar(self)
self.bar1.move(20,20)
self.bar1.setRange(0, 200)
self.bar1.setValue(50)
self.bar1.setStyleSheet(style)
self.bar1.setFormat('%v/%m')
self.bar2 = QtWidgets.QProgressBar(self)
self.bar2.move(20,60)
self.bar2.setRange(0, 200)
self.bar2.setValue(50)
self.bar2.setStyleSheet(style)
self.bar2.setFormat('%p%')
self.bar3 = QtWidgets.QProgressBar(self)
self.bar3.move(20,100)
self.bar3.setRange(0, 200)
self.bar3.setValue(50)
self.bar3.setStyleSheet(style)
self.bar3.setFormat('%v')
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
Form = MyWidget()
Form.show()
sys.exit(app.exec())
QProgressBar 常用方法
下方列出 QSlider 數值調整滑桿的常用方法：
| 方法 | 參數 | 說明 |
|---|---|---|
| setValue() | int | 設定進度。 |
| setRange() | min, max | 設定進度範圍。 |
| setFormat() | format | 設定進度文字格式。 |
| reset() | 重設進度條數值。 |
如果將 setValue() 方法中的最小值與最大值設定為「相同數值」，進度條就會呈現「不斷載入」的狀態。
from PyQt6 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, 0) # 兩個數值設定相同
bar.setValue(50)
Form.show()
sys.exit(app.exec())
class 寫法：
from PyQt6 import QtWidgets
import sys
class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('oxxo.studio')
self.resize(300, 200)
self.ui()
def ui(self):
self.bar = QtWidgets.QProgressBar(self)
self.bar.move(20,20)
self.bar.setRange(0, 0) # 兩個數值設定相同
self.bar.setValue(50)
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
Form = MyWidget()
Form.show()
sys.exit(app.exec())
點擊按鈕增加進度
下方的程式碼執行後，會在畫面中增加兩顆按鈕，一顆按鈕按下時會增加進度，另外一顆按鈕按下時則會重設進度。
from PyQt6 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 寫法：
from PyQt6 import QtWidgets
import sys
class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('oxxo.studio')
self.resize(300, 200)
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.n = 0
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 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())
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～