【PyQt5-Qt Designer】製做炫酷的啓動界面+進度條

QProgressBar 進度條+QSplashScreen 啓動界面

 

知識點：

一、進度條

#將進度條的最大值、最小值設置爲相同時，產生跑馬燈效果
self.progressBar.setMinimum(0)
self.progressBar.setMaximum(0)

一些關於進度條的補充知識點：

Qt提供了兩種顯示進度條的方式，一種是QProgressBar，另外一種是QProgressDialog，QProgressBar類提供了種橫向或縱向顯示進度條的控件表示方式，用來描述任務的完成狀況。QProgressDialog類提供了一種針對慢速過程的進度對話框表示方式，用於描述任務完成的進度狀況。標準的進度條對話框包括一個進度顯示條，一個取消按鈕以及一個標籤。

QProgressBar有幾個重要的屬性值，minimum,maximum決定進度條提示的最小值和最大值，format決定進度條顯示文字的格式，能夠有3種顯示格式：%p%,%v,%m。%p%顯示完成的百分比，這是默認顯示方式；%v顯示當前的進度值；%m顯示總的步進值。invertedAppearance屬性能夠讓進度條以反方向顯示進度。

QProgressDialog也有幾個重要的屬性值，決定了進度條對話框什麼時候出現，出現多長時間，分別是minimum,maximum和minimumDuration。minimum和maximum分別表示進度條的最小值和最大值，決定了進度條的變化範圍，minimumDuration爲進度條對話框出現前的等待時間。系統根據所需完成的工做量估算一個預計花費的時間，若大於設定的等待時間minimumDuration，則出現進度條對話框；若小於設定的等待時間，則不出現進度條對話框。

進度條使用了一個步進值的概念，即一時設置好進度條的最大值和最小值，進度條將會顯示完成的步進值佔總的步進值的百分比，百分比的計算公式爲：

百分比=(value()-minimum())/(maximum()-minimum())

Qt進度條

本例具體實現代碼以下：

 1 # -*- coding: utf-8 -*-   
 2 from PyQt4.QtGui import *  
 3 from PyQt4.QtCore import *  
 4 import sys  
 5   
 6 QTextCodec.setCodecForTr(QTextCodec.codecForName("utf8"))  
 7    
 8 class Progess(QDialog):  
 9     def __init__(self,parent=None):  
10         super(Progess,self).__init__(parent)  
11         self.setWindowTitle(self.tr("使用進度條"))  
12         numLabel=QLabel(self.tr("文件數目"))  
13         self.numLineEdit=QLineEdit("10")  
14         typeLabel=QLabel(self.tr("顯示類型"))  
15         self.typeComboBox=QComboBox()  
16         self.typeComboBox.addItem(self.tr("進度條"))  
17         self.typeComboBox.addItem(self.tr("進度對話框"))  
18   
19         self.progressBar=QProgressBar()  
20   
21         startPushButton=QPushButton(self.tr("開始"))  
22   
23         layout=QGridLayout()  
24         layout.addWidget(numLabel,0,0)  
25         layout.addWidget(self.numLineEdit,0,1)  
26         layout.addWidget(typeLabel,1,0)  
27         layout.addWidget(self.typeComboBox,1,1)  
28         layout.addWidget(self.progressBar,2,0,1,2)  
29         layout.addWidget(startPushButton,3,1)  
30         layout.setMargin(15)  
31         layout.setSpacing(10)  
32   
33         self.setLayout(layout)  
34           
35         self.connect(startPushButton,SIGNAL("clicked()"),self.slotStart)  
36   
37     def slotStart(self):  
38         num=int(self.numLineEdit.text())  
39   
40         if self.typeComboBox.currentIndex()==0:  
41             self.progressBar.setMinimum(0)  
42             self.progressBar.setMaximum(num)  
43   
44             for i in range(num):  
45                 self.progressBar.setValue(i)  
46                 QThread.msleep(100)  
47   
48         elif self.typeComboBox.currentIndex()==1:  
49             progressDialog=QProgressDialog(self)  
50             progressDialog.setWindowModality(Qt.WindowModal)  
51             progressDialog.setMinimumDuration(5)  
52             progressDialog.setWindowTitle(self.tr("請等待"))  
53             progressDialog.setLabelText(self.tr("拷貝..."))  
54             progressDialog.setCancelButtonText(self.tr("取消"))  
55             progressDialog.setRange(0,num)  
56   
57             for i in range(num):  
58                 progressDialog.setValue(i)  
59                 QThread.msleep(100)  
60                 if progressDialog.wasCanceled():  
61                     return  
62                   
63 app=QApplication(sys.argv)  
64 progess=Progess()  
65 progess.show()  
66 app.exec_()  

案例代碼

案例解析：

第38行得到當前須要複製的文件數目，這裏對應進度條的總的步進值。

第40-46行採用進度條的方式顯示進度。

第41，42行設置進度條的步進範圍從0到須要複製的文件數目。

第45，46行模擬每個文件的複製過程，這裏經過QThread.msleep(100)來模擬，在實際中使用文件複製過程來替換，進度條的總的步進值爲須要複製的文件數目，當複製完成一個文件後，步進值增長1。

第48-61行採用進度對話框的方式顯示進度。

第49行建立一個進度對話框。

第50行設置進度對話框採用模態方式進行顯示，即顯示進度的同時，其餘窗口將不響應輸入信號。

第51 行設置進度對話框出現等待時間，此處設定爲5秒，默認爲4秒。

第52-54行設置進度對話框的窗體標題，顯示文字信息以及取消按鈕的顯示文字。

第55行設置進度對話框的步進範圍。

第57-61行模擬每個文件複製過程，這裏經過QThread.msleep(100)進行模擬，在實際中使用文件複製過程來替換，進度條的總的步進值爲須要複製的文件數目，當複製完一個文件後，步進值增長1，這裏須要使用processEvents()來正常響應事件循環，以確保應用程序不會出現阻塞。

第60，61行檢測「取消」按鈕是否被觸發，若觸發則退出循環並關閉進度對話框，在實際應用中，此處還需進行相關的清理工做。

進度對話框的使用有兩種方法，即模態方式與非模態方式。本實例中使用的是模態方式，模態方式的使用比較簡單方便，但必須使用processEvents來使事件循環保持正常進行狀態，從而確保應用不會阻塞。若使用非模態方式，則須要經過QTime來實現定時設置進度條的值。

案例代碼解釋

 

 

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_windows2(object):
    def setupUi(self, windows2):
        windows2.setObjectName("windows2")
        windows2.resize(830, 562)
        windows2.setSizeGripEnabled(True)
        self.widget = QtWidgets.QWidget(windows2)
        self.widget.setGeometry(QtCore.QRect(60, 20, 701, 171))
        self.widget.setObjectName("widget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.widget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.label = QtWidgets.QLabel(self.widget)
        font = QtGui.QFont()
        font.setPointSize(14)
        font.setBold(True)
        font.setWeight(75)
        self.label.setFont(font)
        self.label.setObjectName("label")
        self.verticalLayout.addWidget(self.label, 0, QtCore.Qt.AlignHCenter)
        self.progressBar = QtWidgets.QProgressBar(self.widget)
        font = QtGui.QFont()
        font.setBold(False)
        font.setWeight(50)
        self.progressBar.setFont(font)
        self.progressBar.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
        self.progressBar.setMouseTracking(False)
        self.progressBar.setFocusPolicy(QtCore.Qt.TabFocus)
        self.progressBar.setContextMenuPolicy(QtCore.Qt.DefaultContextMenu)
        self.progressBar.setToolTip("")
        self.progressBar.setToolTipDuration(-1)
        self.progressBar.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.progressBar.setAutoFillBackground(False)
        self.progressBar.setProperty("value", 0)
        self.progressBar.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar.setTextVisible(True)
        self.progressBar.setOrientation(QtCore.Qt.Horizontal)
        self.progressBar.setInvertedAppearance(False)
        self.progressBar.setObjectName("progressBar")
        self.verticalLayout.addWidget(self.progressBar)
        self.frame = QtWidgets.QFrame(self.widget)
        self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame.setObjectName("frame")
        self.horizontalLayout = QtWidgets.QHBoxLayout(self.frame)
        self.horizontalLayout.setObjectName("horizontalLayout")
        spacerItem = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout.addItem(spacerItem)
        self.pushButton = QtWidgets.QPushButton(self.frame)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout.addWidget(self.pushButton)
        spacerItem1 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout.addItem(spacerItem1)
        self.pushButton_2 = QtWidgets.QPushButton(self.frame)
        self.pushButton_2.setObjectName("pushButton_2")
        self.horizontalLayout.addWidget(self.pushButton_2)
        spacerItem2 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout.addItem(spacerItem2)
        self.verticalLayout.addWidget(self.frame)
        self.widget_2 = QtWidgets.QWidget(windows2)
        self.widget_2.setGeometry(QtCore.QRect(520, 230, 301, 161))
        self.widget_2.setObjectName("widget_2")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.widget_2)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.label_2 = QtWidgets.QLabel(self.widget_2)
        font = QtGui.QFont()
        font.setPointSize(14)
        font.setBold(True)
        font.setWeight(75)
        self.label_2.setFont(font)
        self.label_2.setObjectName("label_2")
        self.verticalLayout_2.addWidget(self.label_2, 0, QtCore.Qt.AlignHCenter)
        self.progressBar_2 = QtWidgets.QProgressBar(self.widget_2)
        self.progressBar_2.setLayoutDirection(QtCore.Qt.RightToLeft)
        self.progressBar_2.setAutoFillBackground(True)
        self.progressBar_2.setProperty("value", 0)
        self.progressBar_2.setObjectName("progressBar_2")
        self.verticalLayout_2.addWidget(self.progressBar_2)
        self.frame_2 = QtWidgets.QFrame(self.widget_2)
        self.frame_2.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_2.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_2.setObjectName("frame_2")
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout(self.frame_2)
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        spacerItem3 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_2.addItem(spacerItem3)
        self.pushButton_3 = QtWidgets.QPushButton(self.frame_2)
        self.pushButton_3.setObjectName("pushButton_3")
        self.horizontalLayout_2.addWidget(self.pushButton_3)
        spacerItem4 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_2.addItem(spacerItem4)
        self.pushButton_4 = QtWidgets.QPushButton(self.frame_2)
        self.pushButton_4.setObjectName("pushButton_4")
        self.horizontalLayout_2.addWidget(self.pushButton_4)
        spacerItem5 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_2.addItem(spacerItem5)
        self.verticalLayout_2.addWidget(self.frame_2)
        self.widget_3 = QtWidgets.QWidget(windows2)
        self.widget_3.setGeometry(QtCore.QRect(20, 190, 491, 351))
        self.widget_3.setObjectName("widget_3")
        self.label_3 = QtWidgets.QLabel(self.widget_3)
        self.label_3.setGeometry(QtCore.QRect(140, 150, 192, 19))
        font = QtGui.QFont()
        font.setPointSize(14)
        font.setBold(True)
        font.setWeight(75)
        self.label_3.setFont(font)
        self.label_3.setObjectName("label_3")
        self.frame_3 = QtWidgets.QFrame(self.widget_3)
        self.frame_3.setGeometry(QtCore.QRect(90, 180, 314, 43))
        self.frame_3.setFrameShape(QtWidgets.QFrame.StyledPanel)
        self.frame_3.setFrameShadow(QtWidgets.QFrame.Raised)
        self.frame_3.setObjectName("frame_3")
        self.horizontalLayout_3 = QtWidgets.QHBoxLayout(self.frame_3)
        self.horizontalLayout_3.setObjectName("horizontalLayout_3")
        spacerItem6 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_3.addItem(spacerItem6)
        self.pushButton_5 = QtWidgets.QPushButton(self.frame_3)
        self.pushButton_5.setObjectName("pushButton_5")
        self.horizontalLayout_3.addWidget(self.pushButton_5)
        spacerItem7 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_3.addItem(spacerItem7)
        self.pushButton_6 = QtWidgets.QPushButton(self.frame_3)
        self.pushButton_6.setObjectName("pushButton_6")
        self.horizontalLayout_3.addWidget(self.pushButton_6)
        spacerItem8 = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout_3.addItem(spacerItem8)
        self.progressBar_4 = QtWidgets.QProgressBar(self.widget_3)
        self.progressBar_4.setGeometry(QtCore.QRect(10, 330, 471, 20))
        self.progressBar_4.setMaximum(1)
        self.progressBar_4.setProperty("value", 0)
        self.progressBar_4.setTextVisible(False)
        self.progressBar_4.setInvertedAppearance(True)
        self.progressBar_4.setObjectName("progressBar_4")
        self.progressBar_5 = QtWidgets.QProgressBar(self.widget_3)
        self.progressBar_5.setGeometry(QtCore.QRect(10, 20, 471, 20))
        self.progressBar_5.setMaximum(1)
        self.progressBar_5.setProperty("value", -1)
        self.progressBar_5.setTextVisible(False)
        self.progressBar_5.setObjectName("progressBar_5")
        self.progressBar_6 = QtWidgets.QProgressBar(self.widget_3)
        self.progressBar_6.setGeometry(QtCore.QRect(9, 40, 21, 291))
        self.progressBar_6.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.progressBar_6.setAutoFillBackground(False)
        self.progressBar_6.setMaximum(1)
        self.progressBar_6.setProperty("value", -1)
        self.progressBar_6.setAlignment(QtCore.Qt.AlignCenter)
        self.progressBar_6.setTextVisible(True)
        self.progressBar_6.setOrientation(QtCore.Qt.Vertical)
        self.progressBar_6.setInvertedAppearance(False)
        self.progressBar_6.setTextDirection(QtWidgets.QProgressBar.TopToBottom)
        self.progressBar_6.setObjectName("progressBar_6")
        self.progressBar_7 = QtWidgets.QProgressBar(self.widget_3)
        self.progressBar_7.setGeometry(QtCore.QRect(460, 40, 21, 291))
        self.progressBar_7.setLayoutDirection(QtCore.Qt.LeftToRight)
        self.progressBar_7.setAutoFillBackground(False)
        self.progressBar_7.setMaximum(1)
        self.progressBar_7.setProperty("value", 0)
        self.progressBar_7.setAlignment(QtCore.Qt.AlignLeading|QtCore.Qt.AlignLeft|QtCore.Qt.AlignVCenter)
        self.progressBar_7.setTextVisible(False)
        self.progressBar_7.setOrientation(QtCore.Qt.Vertical)
        self.progressBar_7.setInvertedAppearance(True)
        self.progressBar_7.setTextDirection(QtWidgets.QProgressBar.TopToBottom)
        self.progressBar_7.setObjectName("progressBar_7")

        self.retranslateUi(windows2)
        QtCore.QMetaObject.connectSlotsByName(windows2)

    def retranslateUi(self, windows2):
        _translate = QtCore.QCoreApplication.translate
        windows2.setWindowTitle(_translate("windows2", "Dialog"))
        self.label.setText(_translate("windows2", "第一種QProgressBar"))
        self.progressBar.setFormat(_translate("windows2", "%p"))
        self.pushButton.setText(_translate("windows2", "開始"))
        self.pushButton_2.setText(_translate("windows2", "中止"))
        self.label_2.setText(_translate("windows2", "第二種QProgressBar"))
        self.pushButton_3.setText(_translate("windows2", "開始"))
        self.pushButton_4.setText(_translate("windows2", "暫停"))
        self.label_3.setText(_translate("windows2", "第三種QProgressBar"))
        self.pushButton_5.setText(_translate("windows2", "開始"))
        self.pushButton_6.setText(_translate("windows2", "暫停"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    windows2 = QtWidgets.QDialog()
    ui = Ui_windows2()
    ui.setupUi(windows2)
    windows2.show()
    sys.exit(app.exec_())

UI文件

 

# -*- coding: utf-8 -*-
from PyQt5.QtCore import pyqtSlot, QBasicTimer,Qt
from PyQt5.QtWidgets import QDialog,QSplashScreen
from Ui_processbar1 import Ui_windows2

class windows2(QDialog, Ui_windows2):

    def __init__(self, parent=None):
        super(windows2, self).__init__(parent)
        self.setupUi(self)
        # 建立一個定時器對象，默認開始爲0
        self.timer = QBasicTimer()
        self.step = 0

    @pyqtSlot()
    def on_pushButton_clicked(self):
        if self.timer.isActive(): 
            self.timer.stop()
            self.pushButton.setText('開始')
        else:
            self.timer.start(100, self)
            self.pushButton.setText('暫停')

    def timerEvent(self, event):
        if self.step >= 100:
            self.timer.stop()
            return
        self.step = self.step + 1
        self.progressBar.setValue(self.step)

    @pyqtSlot()
    def on_pushButton_2_clicked(self):
        self.timer.stop()
        self.progressBar.setValue(0)
    
    @pyqtSlot()
    def on_pushButton_3_clicked(self):
        for i in range(100):
            self.progressBar_2.setValue(i)
            time.sleep(0.1)

    @pyqtSlot()
    def on_pushButton_4_clicked(self):
        self.progressBar_2.setValue(0)

    @pyqtSlot()
    def on_pushButton_5_clicked(self):
        self.progressBar_5.setMaximum(0)
        self.progressBar_7.setMaximum(0)
        self.progressBar_4.setMaximum(0)
        self.progressBar_6.setMaximum(0)

    @pyqtSlot()
    def on_pushButton_6_clicked(self):
        self.progressBar_4.setMaximum(1)
        self.progressBar_5.setMaximum(1)
        self.progressBar_6.setMaximum(1)
        self.progressBar_7.setMaximum(1)


if __name__ == "__main__":
    import sys, time,PyQt5
    app = PyQt5.QtWidgets.QApplication(sys.argv)
    #定義QSplashScreen 插入啓動頁背景圖
    splash = QSplashScreen(PyQt5.QtGui.QPixmap("splash.jpg"))
    splash.show()
    #定義字體格式
    font = PyQt5.QtGui.QFont()
    font.setPointSize(16)
    font.setBold(True)
    font.setWeight(75)
    splash.setFont(font)
    splash.showMessage("正在加載。。。",Qt.AlignCenter,Qt.red,)
    time.sleep(1)
    splash.showMessage("渲染圖片。。。", Qt.AlignCenter, Qt.red)
    time.sleep(1)
    # 設置進程，啓動加載頁面時能夠進行其餘操做而不會卡死
    app.processEvents()
    ui = windows2()
    ui.show()
    # 結束啓動頁
    splash.finish(ui)
    sys.exit(app.exec_())

 

 

 

補充知識點：

dir(PyQt5.QtCore)) 　　 #返回PyQt5.QtCore 的全部方法，是列表類型

help(PyQt5.QtCore.QTime) 　　 #使用help()方法查看PyQt5.QtCore.QTime 如何使用