Last Updated on 2021-04-12 by Clay
After noting the note about components menu and toolbar, I want to share some new components today. They are also the components I use into my project.
Today, I will introduce how to use three components such as QProgressBar, QHorizontalSlider, and QDial in PyQt5.
Let me show the sample interface.
First, we still save the UI file and then use the PyUIC tool to convert it to python file. The following example:
# -*- 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"))
We can see that the progress bar, slider, dial and other components have been defined.
Next, we only need to write a program to inherit this category.
Set progress bar
First look at the sample program:
# -*- 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_())
We see the part of the ProgressBar, which is the component we inherit - the part of the progress bar.
# ProgressBar
self.ui.progressBar.setMinimum(0)
self.ui.progressBar.setMaximum(99)
self.ui.progressBar.setValue(0)
setMinimum()
: Set the progress bar minimumsetMaximum()
: Set the progress bar maximumsetValue()
: Set the progress bar current value
You can see that the range of my progress bar is 0-99, which is also in line with the preset range of sliders we will set later.
After we execute the program, we can see this picture:
Slider
The programming of the slider is very simple:
# HorizontalSlider self.ui.horizontalSlider.valueChanged.connect(self.sliderValue)
If the value to change, connect to our written function self.sliderValue().
def sliderValue(self): self.ui.progressBar.setValue(self.ui.horizontalSlider.value())
This program is also very simple, it is to give the value of horizomtalSlider to our progress bar progressBar.
Output:
Dial
The setting of dial is also simple.
# Dial self.ui.dial.setRange(0, 100) self.ui.dial.setNotchesVisible(True) self.ui.dial.valueChanged.connect(self.dialValue)
setRange()
: Set the preset range of rotationsetNotChesVisible()
: Set whether there is a scale next to dial
Then we also set the value of the dial to the function self.dialValue() we wrote in advance if it changes.
def dialValue(self): self.ui.progressBar.setValue(self.ui.dial.value())
We again assign the changed value directly to the progress bar progressBar.
The above is the PyQt5 experience notes today, I believe that the progress bar can be used in a variety of projects.
Read More
- [PyQt5] Tutorial(1) Install PyQt5 and print "Hello World!"
- [PyQt5] Tutorial(2) QLabel, QLineEdit, QPushButton
- [PyQt5] Tutorial(3) QMainWindow, QIcon, QPixmap, QPalette
- [PyQt5] Tutorial(4) Menu, Toolbar
- [PyQt5] Tutorial(5) ProgressBar, HorizontalSlider, QDial
- [PyQt5] Tutorial(6) comboBox、BoxLayout
- [PyQt5] Tutorial(7) hide, show, auto fit window size
- [PyQt5] Tutorial(8) QTimer, QlcdNumber
- [PyQt5] Tutorial(9) Use QCalendar to create a calendar component
- [PyQt5] Tutorial(10) Use keyboard to enter command and listen mouse clicked
- [PyQt5] Tutorial(11) Use QColorDialog to let user select color