QSpinBox Qt Creator Example

How to use a QSpinBox widget in a Qt Widgets Application using Qt Creator and the C++ language. The example application in this tutorial uses a Qt spin box widget to allow a user to enter a number. Clicking a button on the application window reads the value from the spin box and writes it to a label.

The following image shows the simple example application built in this tutorial that uses a Qt spin box widget.

QSpinBox Widget used in a Qt Example Application
QSpinBox Widget used in a Qt Example Application

Comparing Qt with GTK: A Qt spin box of type QSpinBox is the equivalent of a spin button in GTK of type GtkSpinButton.

Part 16 of the Qt Creator C++ Tutorial

Go to the Qt Programming Tutorial Series Table of Contents

Qt Spin Box Tutorial Steps using QSpinBox

Follow the steps below to create the QSpinBox example using Qt Creator.

1. Start a New Qt Widgets Application

Open Qt Creator and start a new Qt Widgets Application project called spin_box.

Delete the three default widgets from the main window in Qt Creator. It is assumed that you have been following this Qt Creator tutorial series and know how to do this.

2. Place the Widgets including QSpinBox Widget

The following image shows the widgets placed in this tutorial. Details of the widgets and widget parameters to change follow.

Widgets Placed in this Tutorial including a QSpinBox
Widgets Placed in this Tutorial including a QSpinBox

2.1 Place a Vertical Layout

Place a Vertical Layout on the main window. The Vertical Layout holds all of the other widgets in this project.

2.2 Place a Grid Layout

Enlarge the Vertical Layout placed in the previous step by dragging the handles on this widget. Place a Grid Layout in the Vertical Layout.

2.3 Place Three Labels

Place three Label widgets in the Grid Layout. Do this by placing two labels on the left and one on the bottom right, leaving the top right open for the QSpinBox.

Change the text of the labels on the left to the following from top to bottom.

  • Enter Quantity:
  • Quantity Entered:

Change the third label text to 1 and objectName to lbl_quantity.

2.4 Place a QSpinBox Spin Box Widget

Find Spin Box under Input Widgets in left pane of Qt Creator. Place a Spin Box in the top right open box of the Grid Layout.

Change the objectName of the Spin Box to sbx_quantity.

Under QSpinBox in the right pane of Qt Creator, change the following.

  • minimum to 1
  • maximum to 99999
  • value to 1

2.5 Place a Push Button

Place a Push Button widget at the bottom of the Vertical Layout so that it sits below the Grid Layout.

Change the Push Button text to Update and the objectName to btn_update.

2.6 Edit the Main Window

Select the main window and change its title to Spin Box.

Right-click the main window and select Lay out → Lay Out in a Grid from the menu that pops up.

Resize the main window to a reasonable size by dragging the handles around the main window.

2.7 Add a Slot for the Button

Right-click the Update button. Click Go to slot… on the menu that pops up. In the dialog box that opens, leave the default clicked() signal selected and then click the OK button.

3. Write the C++ Code

The C++ code for this example is very simple and consists of adding a single line of code to mainwindow.cpp. Add the following line of code to the button slot.

ui->lbl_quantity->setText(ui->sbx_quantity->cleanText());

See the full listing of code from mainwindow.cpp below.

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_btn_update_clicked()
{
    ui->lbl_quantity->setText(ui->sbx_quantity->cleanText());
}

4. Run the QSpinBox Example Application

Change the value in the spin box by either using the up and down arrows, or by typing a number into the spin box. Click the Update button to update the label with the new Spin Box value.

The code in the button clicked slot simply gets the text from the Spin Box widget and passes it to the setText() method of the lbl_quantity label. This updates the label text with the text from the Spin Box.

Leave a Reply

Your email address will not be published. Required fields are marked *