QComboBox Qt Creator Example

A simple Qt example for beginners that shows how to use a QComboBox widget using Qt Creator and C++ code. Get the selected item number and selected text from a Qt Combo Box in this tutorial.

The image below shows the application built in this part of the Qt Creator C++ tutorial series. A QComboBox widget is found at the top of the application window. It allows items to be selected from a drop-down list.

QComboBox Example Application
QComboBox Example Application

Comparing Qt with GTK: A Qt Combo Box of type QComboBox is the equivalent of GtkComboBoxText widget in GTK.

Part 17 of the Qt Creator C++ Tutorial

Go to the Qt Programming Tutorial Series Table of Contents

Qt Combo Box Tutorial Steps using QComboBox

Follow the steps below to build the Qt Combo Box example application that uses a QComboBox widget.

1. Start a New Qt Widgets Application

Open Qt Creator and start a new Qt Widgets Application called combo_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 the QComboBox Widget

The following image shows the widgets placed in this tutorial. It shows the QComboBox widget at the top of the application window. Details of the widgets and widget parameters to change follow.

A QtComboBox used in a Qt Creator Example Application
A QtComboBox used in a Qt Creator Example Application

Open mainwindow.ui for editing in Qt Creator. This changes Qt Creator to Design mode.

2.1 Place a Horizontal Layout

Place a Horizontal Layout in the middle of the main window.

2.2 Place Two Labels

Drag and drop two labels into the Horizontal Layout. Change the following attributes of the two labels from left to right.

  • objectName to lbl_sel_num
  • text to Selection Number
  • objectName to lbl_sel_text
  • text to Selection Text

Resize the Horizontal Layout so that the two text labels don’t overlap.

2.3 Place a Combo Box of Type QComboBox

Find the Combo Box widget under Input Widgets in the left pane of Qt Creator. Place a Combo Box widget of type QComboBox above the Horizontal Layout.

Resize the width of the Combo Box widget by dragging a handle at the left or right of the widget.

Change the objectName of the Combo Box to combobox_options.

2.4 Place a Push Button

Place a Push Button below the Vertical Layout. Change the objectName of the Push Button to btn_show_options and text to Show Options.

2.5 Edit the Main Window

Change the title of the main window to Combo Box.

Right-click on 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.

2.6 Add a Slot for the Button Widget

Add a slot for the clicked() signal of the Push Button widget. This has been done many times before in previous parts of this tutorial series. Check back to previous tutorial parts if you don’t know how to do this.

3. Write the C++ Code

Use the addItem() method of the QComboBox widget to add items to the Combo Box widget. Do this in the constructor of the main window as shown in the following code from mainwindow.cpp.

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

    // Add items to Combo Box
    ui->combobox_options->addItem("Option 1");
    ui->combobox_options->addItem("Option 2");
    ui->combobox_options->addItem("Option 3");
}

Add the following code to the slot for the button clicked signal. This code gets the index number and text from the currently selected item in the Combo Box. It then updates the two labels with this information.

void MainWindow::on_btn_show_options_clicked()
{
    QString str;

    // Get index number of currently selected number from the Combo Box
    str.sprintf("%d", ui->combobox_options->currentIndex());
    ui->lbl_sel_num->setText(str);

    // Get the text of the currently selected option from the Combo Box
    ui->lbl_sel_text->setText(ui->combobox_options->currentText());
}

See the full listing of the 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);

    // Add items to Combo Box
    ui->combobox_options->addItem("Option 1");
    ui->combobox_options->addItem("Option 2");
    ui->combobox_options->addItem("Option 3");
}

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

void MainWindow::on_btn_show_options_clicked()
{
    QString str;

    // Get index number of currently selected number from the Combo Box
    str.sprintf("%d", ui->combobox_options->currentIndex());
    ui->lbl_sel_num->setText(str);

    // Get the text of the currently selected option from the Combo Box
    ui->lbl_sel_text->setText(ui->combobox_options->currentText());
}

4. Run the QtComboBox Example Application

Build and run the QtComboBox example application. Select an item from the Combo Box drop-down list. Click the push button to update the labels. Note that the index of the Combo Box items starts at 0.

Leave a Reply

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