In this PyQt6 lesson we are going to learn about How to Create SpinBox in PyQt6, QSpinBox is designed to handle integers and discrete sets of values (e.g., month names), use QDoubleSpinBox for floating point values. QSpinBox allows the user to choose a value by clicking the up/down buttons or pressing up/down on the keyboard to increase/decrease the value currently displayed.
This is the complete code for this lesson.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
from PyQt6.QtWidgets import QApplication, QWidget,\ QLineEdit,QSpinBox, QHBoxLayout, QLabel from PyQt6.QtGui import QIcon import sys class Window(QWidget): def __init__(self): super().__init__() self.setWindowTitle("PyQt6 SpinBox - Geekscoders.com") self.setWindowIcon(QIcon("qt.png")) self.setGeometry(500,200, 500,400) self.create_spinbox() def create_spinbox(self): # cretae hboxlayout hbox = QHBoxLayout() # in here we have created our label label = QLabel("Laptop Price : ") # this is our linedit self.lineEdit = QLineEdit() # we need to create the object of QSpinBox class self.spinbox = QSpinBox() # we have connected valueChanged signal self.spinbox.valueChanged.connect(self.spin_selected) self.totalResult = QLineEdit() # add widgets to your hbox layout hbox.addWidget(label) hbox.addWidget(self.lineEdit) hbox.addWidget(self.spinbox) hbox.addWidget(self.totalResult) self.setLayout(hbox) def spin_selected(self): if self.lineEdit.text() != 0: price = int(self.lineEdit.text()) totalPrice = self.spinbox.value() * price self.totalResult.setText(str(totalPrice)) else: print("Wrong value") app = QApplication(sys.argv) window = Window() window.show() sys.exit(app.exec()) |
We want to create QHBoxLayout, because we want to align our widgets horizontally.
1 |
hbox = QHBoxLayout() |
This is our QLineEdit, basically we are going to create two QLineEdit.
1 |
self.lineEdit = QLineEdit() |
We have connected the valueChanged() signal of QSpinBox with the method that we have created.
1 |
self.spinbox.valueChanged.connect(self.spin_selected) |
At the end we need to add all our widgets in the QHBoxLayout.
1 2 3 4 |
hbox.addWidget(label) hbox.addWidget(self.lineEdit) hbox.addWidget(self.spinbox) hbox.addWidget(self.totalResult) |
And this is the method that we have already connected with the valueChanged() signal of QSpinBox, basically in this method we are going to get the value from the QLineEdit and after multiply that with the SpinBox value.
1 2 3 4 5 6 7 8 9 10 |
def spin_selected(self): if self.lineEdit.text() != 0: price = int(self.lineEdit.text()) totalPrice = self.spinbox.value() * price self.totalResult.setText(str(totalPrice)) else: print("Wrong value") |
Run the complete code and this is the result.
Now we want to create QDoubleSpinBox using Qt Designer, open your Qt Designer, you can just write pyqt5designer in your terminal, after opening the Qt Designer you need to create QWidet window, We need to add widgets in Qt Designer.
- First add QHBoxLayout
- Now you need to add four widgets in the QHBoxLayout, QLabel,QLineEdit,QDoubleSpinBox and QLineEdit.
You can see that we have added some design for our GUI, you can right click after that choose Change styleSheet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
QWidget { background-color:"green" } QLabel { color:"white" } QDoubleSpinBox { color:"white" } QLineEdit { color:"white" } |
After completing the design you need to save the .ui file, iam going to name it doublespin.ui, for converting you need to use pyuic6 module., pyuic6 module is located in the Scripts folder of your Python installation, run this command for converting in your terminal.
1 |
pyuic6 -x doublespin.ui -o mydoublespin.py |
This is the converted code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
from PyQt6 import QtCore, QtGui, QtWidgets class Ui_Form(object): def setupUi(self, Form): Form.setObjectName("Form") Form.resize(471, 130) Form.setStyleSheet("QWidget {\n" "background-color:\"green\"\n" "\n" "\n" "}\n" "\n" "QLabel {\n" "\n" "color:\"white\"\n" "\n" "\n" "}\n" "\n" "\n" "QDoubleSpinBox {\n" "\n" "color:\"white\"\n" "\n" "\n" "}\n" "\n" "\n" "QLineEdit {\n" "\n" "color:\"white\"\n" "\n" "}") self.horizontalLayout_2 = QtWidgets.QHBoxLayout(Form) self.horizontalLayout_2.setObjectName("horizontalLayout_2") self.horizontalLayout = QtWidgets.QHBoxLayout() self.horizontalLayout.setObjectName("horizontalLayout") self.label = QtWidgets.QLabel(Form) font = QtGui.QFont() font.setPointSize(12) font.setBold(True) font.setWeight(75) self.label.setFont(font) self.label.setObjectName("label") self.horizontalLayout.addWidget(self.label) self.lineEdit = QtWidgets.QLineEdit(Form) font = QtGui.QFont() font.setPointSize(12) self.lineEdit.setFont(font) self.lineEdit.setObjectName("lineEdit") self.horizontalLayout.addWidget(self.lineEdit) self.doubleSpinBox = QtWidgets.QDoubleSpinBox(Form) font = QtGui.QFont() font.setPointSize(12) self.doubleSpinBox.setFont(font) self.doubleSpinBox.setObjectName("doubleSpinBox") self.horizontalLayout.addWidget(self.doubleSpinBox) # we have connected the valueChanged signal self.doubleSpinBox.valueChanged.connect(self.spin_selected) self.lineEdit_2 = QtWidgets.QLineEdit(Form) font = QtGui.QFont() font.setPointSize(12) self.lineEdit_2.setFont(font) self.lineEdit_2.setObjectName("lineEdit_2") self.horizontalLayout.addWidget(self.lineEdit_2) self.horizontalLayout_2.addLayout(self.horizontalLayout) self.retranslateUi(Form) QtCore.QMetaObject.connectSlotsByName(Form) def spin_selected(self): if self.lineEdit.text() != 0: price = int(self.lineEdit.text()) totalPrice = self.doubleSpinBox.value() * price self.lineEdit_2.setText(str(totalPrice)) else: print("Wrong value") def retranslateUi(self, Form): _translate = QtCore.QCoreApplication.translate Form.setWindowTitle(_translate("Form", "Form")) self.label.setText(_translate("Form", "Sugar Price:")) if __name__ == "__main__": import sys app = QtWidgets.QApplication(sys.argv) Form = QtWidgets.QWidget() ui = Ui_Form() ui.setupUi(Form) Form.show() sys.exit(app.exec()) |
There are two changes that we have brought in this code, first we have connected the valueChanged() signal of QDoubleSpinBox with the method that we have created at the bottom of the code.
1 |
self.doubleSpinBox.valueChanged.connect(self.spin_selected) |
And this is the method that we have already connected with the valueChanged() signal of QDoubleSpinBox, basically in this method we are going to get the value from the QLineEdit and after multiply that with the SpinBox value.
1 2 3 4 5 6 |
def spin_selected(self): if self.lineEdit.text() != 0: price = int(self.lineEdit.text()) totalPrice = self.doubleSpinBox.value() * price self.lineEdit_2.setText(str(totalPrice)) |
Run the complete code and this is the result.