Skip to content

[PyQt5] 基本教學(5) 進度條、滑動條、旋轉鈕

Last Updated on 2021-04-10 by Clay

繼上次做了菜單與工具欄的筆記之後，今天再次介紹新的元件，也是我打算用於自己專案界面的元件。

今天主要簡單地介紹該如何使用 PyQt5 裡頭的 QProgrssBar、QHorizontalSlider、QDial 等三個元件。翻譯成中文的話不外乎是：進度條、滑動條、旋轉鈕。算是相當淺顯易懂。

總之先上我使用 Qt Designer 拉出的範例界面：

首先，我們依然存成 .ui 檔，然後使用 PyUIC 工具轉成 .py 檔。如下範例：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'progress.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        # ProgressBar
        self.progressBar = QtWidgets.QProgressBar(self.centralwidget)
        self.progressBar.setGeometry(QtCore.QRect(130, 180, 221, 41))
        self.progressBar.setProperty("value", 24)
        self.progressBar.setObjectName("progressBar")

        # Dial
        self.dial = QtWidgets.QDial(self.centralwidget)
        self.dial.setGeometry(QtCore.QRect(380, 150, 111, 91))
        self.dial.setObjectName("dial")

        # HorizontalSlider
        self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider.setGeometry(QtCore.QRect(110, 280, 241, 31))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))


我們可以看到進度條、滑動條、旋轉鈕等元件都已經被定義好了。接下來我們只需要再寫一個程式來繼承這個類別，就可以實現界面、邏輯程式的分離了。

設定進度條

首先看下範例程式：

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets, QtGui, QtCore
from progress import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        # ProgressBar
        self.ui.progressBar.setMinimum(0)
        self.ui.progressBar.setMaximum(99)
        self.ui.progressBar.setValue(0)

        # HorizontalSlider
        self.ui.horizontalSlider.valueChanged.connect(self.sliderValue)

        # Dial
        self.ui.dial.setRange(0, 100)
        self.ui.dial.setNotchesVisible(True)
        self.ui.dial.valueChanged.connect(self.dialValue)

    def sliderValue(self):
        self.ui.progressBar.setValue(self.ui.horizontalSlider.value())

    def dialValue(self):
        self.ui.progressBar.setValue(self.ui.dial.value())


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


首先我們看到 ProgressBar 的部份，也就是我們繼承的元件 —— 進度條的部份。

# ProgressBar
self.ui.progressBar.setMinimum(0)
self.ui.progressBar.setMaximum(99)
self.ui.progressBar.setValue(0)

setMinimum(): 設定進度條最小值
setMaximum(): 設定進度條最大值
setValue(): 設定進度條當前數值

可以看到我設定進度條的範圍為 0-99，這也符合我們等會兒要設定的滑動條預設值範圍。

我們執行程式後，可以看到這樣的畫面：

滑動條

滑動條的程式設定非常單純：

# HorizontalSlider
self.ui.horizontalSlider.valueChanged.connect(self.sliderValue)


設定若值改變，便連接到我們寫好的function self.sliderValue()。

def sliderValue(self):
    self.ui.progressBar.setValue(self.ui.horizontalSlider.value())


這個程式也非常單純，便是將 horizomtalSlider 的值賦予我們的進度條 progressBar。

效果：

我們滑到一半的情況。
我們拉到底的情況。

旋轉鈕

旋轉鈕的設定同樣單純。

# Dial
self.ui.dial.setRange(0, 100)
self.ui.dial.setNotchesVisible(True)
self.ui.dial.valueChanged.connect(self.dialValue)


setRange(): 設定旋轉的預設值範圍
setNotChesVisible(): 設定旋轉鈕旁是否有刻度

然後我們同樣設定如果旋轉鈕的值若是產生變化，便連接到我們事先寫好的 function self.dialValue()。

def dialValue(self):
    self.ui.progressBar.setValue(self.ui.dial.value())


然後我們再次將改變的值直接賦予進度條 progressBar。

轉到一半的場景
轉滿的情況

以上，就是今天的 PyQt5 心得筆記，相信進度條這種東西可以在各式各樣的專案派上用場。

Read More

Tags:

2 thoughts on “[PyQt5] 基本教學(5) 進度條、滑動條、旋轉鈕”

  1. gaziantep escort
    Reply

    My programmer is trying to convince me to move to .net from PHP.

    I have always disliked the idea because of the
    expenses. But he’s tryiong none the less. I’ve been using Movable-type
    on numerous websites for about a year and am worried about switching to another platform.
    I have heard fantastic things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?
    Any help would be greatly appreciated!

Leave a Reply