看完這篇文章你會得到的成果圖

前言

這篇我們要來學一個新的東西 QProgressBar!
QProgressBar 就是一個能顯示出進度條效果的酷功能哦!

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day19_progress_bar

UI 設計部份 (UI.py)

我們從 Display Widgets 中選取 Progress Bar，
從預覽中，我們就已經可以感覺到進度條的效果囉!

另外我們拉一個按鈕，作為「開始鍵」。

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day19.ui -> UI.py

pyuic5 -x day19.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

• 看看我們製作出來的介面

python UI.py

controller 設計部份 (controller.py)

單純控制 QProgressBar 很簡單，我們只需要設定

• 上限值：setMaximum
• 增加值：setValue

注意都是 「整數 int」 的變化, 更改值請以更改上限為主，讓他自己去換算。
使用 「小數」 會跳錯!!!

def setup_control(self):
    self.ui.pushButton.clicked.connect(self.start_progress) 

def start_progress(self):
    max_value = 100
    self.ui.progressBar.setMaximum(max_value)

    for i in range(max_value):
        time.sleep(0.1)
        self.ui.progressBar.setValue(i+1)

設定主程式 setup_control()

• self.ui.pushButton.clicked.connect(self.start_progress)：設定按鍵功能，與 start_progress() 這個 function 串接

按鈕啟動的程式 start_progress()

設定上限值為 100

• max_value = 100
• self.ui.progressBar.setMaximum(max_value)

設定每次增加 1

• for i in range(max_value):
• time.sleep(0.1)：休息 0.1 秒
• self.ui.progressBar.setValue(i+1) 每次值增加 1

執行結果

照我們 day5 的程式架構，我們執行

python start.py

按下 GO 之後，進度條就順利執行囉!