Qt Toggle Button Qt Creator Example

Simple example application that shows how to set up and use a Qt toggle button using Qt Creator and C++. Creates a Toggle Button from a QPushButton.

The following image shows the simple application built in this part of the tutorial series. It shows how to use a Qt toggle button.

Qt Toggle Button Example Application Built using Qt Creator
Qt Toggle Button Example Application Built using Qt Creator

Comparing Qt with GTK: In Qt, a toggle button is created by using a push button and changing its checkable parameter. GTK has a dedicated toggle button widget of type GtkToggleButton.

Part 18 of the Qt Creator C++ Tutorial

Go to the Qt Programming Tutorial Series Table of Contents

Qt Toggle Button Tutorial Steps

Follow the steps below to create the Qt Toggle Button application using Qt Creator.

1. Start a New Qt Widgets Application

Open Qt Creator and start a new Qt Widgets Application called toggle_button.

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 Application Widgets

The image below shows the widgets placed in this tutorial. Follow the steps to place these widgets and change their parameters.

Widgets Placed in the Qt Toggle Button Example
Widgets Placed in the Qt Toggle Button Example

2.1 Place a Label Widget

Place a Label widget at the top of the main window. Edit the Label widget as follows.

  • Change the text to Button State: Inactive
  • Change the objectName to lbl_button_state
  • Resize the Label widget to show its full text

2.2 Place a Push Button Widget

Place a Push Button widget below the Label placed in the previous step. Make the following changes to the attributes of the Push Button widget.

  • Change the text to Click to Change Button State
  • Change the objectName to btn_state

Convert the button into a Qt Toggle Button. To do this, find the checkable item under QAbstactButton in the lower right pane of Qt Creator. Click the checkable item to check it.

Resize the button to show all of its text.

2.3 Modify the Main Window

Change the window title to Toggle Button.

Shift the two widgets near the left of the main window. Resize the main window to a reasonable size.

Right-click on the main window and select Lay out → Lay Out in a Grid from the menu that pops up. This lays out the widgets to fill the window, but the Label text is left aligned.

Click the Label to select it. Find QLabel in the bottom right pane of Qt Creator. Find alignment and then Horizontal under QLabel. Change the horizontal alignment from AlignLeft to AlignHCenter. This centers the label.

2.4 Add a Slot for the Toggle Button

Add a slot for the clicked() handler of the button widget.

3. Write the C++ Code

Modify mainwindow.cpp to add code to the slot added in the previous step. The full code listing of mainwindow.cpp follows.

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_state_clicked()
{
    if (ui->btn_state->isChecked()) {
        ui->lbl_button_state->setText("Button State: Active");
    }
    else {
        ui->lbl_button_state->setText("Button State: Inactive");
    }
}

4. Run the Qt Toggle Button Application

Build the Toggle Button application. Run the application and click the toggle button to change its state. The state of the toggle button is updated in the label widget.

Code in the slot for the button clicked handler checks the state of the button using the isChecked() method. This determines whether the button is checked or active, or if it is unchecked or inactive. The text of the label is updated according to the button state.

Leave a Reply

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