iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Software Development

【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】系列 第 19

【沒錢買ps,PyQt自己寫】Day 19 - 使用 QProgressBar,製作進度條的功能

  • 分享至 

  • xImage
  •  

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

前言

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

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

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

https://www.wongwonggoods.com/python/pyqt5-5/

此篇文章的範例程式碼 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 之後,進度條就順利執行囉!


★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 19 - 使用 QProgressBar,製作進度條的功能


上一篇
【沒錢買ps,PyQt自己寫】Day 18 / Project 使用 QTimer,自製碼表(計時器) PyQt5 stopwatch DIY
下一篇
【沒錢買ps,PyQt自己寫】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」?
系列文
【今年還是不夠錢買psQQ,不如我們用PyQt自己寫一個】30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言