First programs in Qt5

last modified October 18, 2023

In this part of the Qt5 C++ programming tutorial, we create our first programs.

We display a tooltip and various mouse cursors. We center a window on the screen and introduce the signal and slot mechanism.

Simple example

We start with a very simple example.

simple.cpp

#include <QApplication>
#include <QWidget>

int main(int argc, char *argv[]) {

    QApplication app(argc, argv);

    QWidget window;

    window.resize(250, 150);
    window.setWindowTitle("Simple example");
    window.show();

    return app.exec();
}

The example shows a basic window on the screen.

#include <QApplication>
#include <QWidget>

We include necessary header files.

QApplication app(argc, argv);

This is the application object. Each Qt5 application must create this object. (Except for console applications.)

QWidget window;

This is our main widget.

window.resize(250, 150);
window.setWindowTitle("Simple example");
window.show();

Here we resize the widget and set a title for our main window. In this case, the QWidget is our main window. And finally, we show the widget on the screen.

return app.exec();

The exec method stars the main loop of the application.

A tooltip

A tooltip is a specific hint about an item in an application. The following example will demonstrate, how we can create a tooltip in Qt5 programming library.

tooltip.cpp

#include <QApplication>
#include <QWidget>

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);

  QWidget window;

  window.resize(350, 250);
  window.setWindowTitle("ToolTip");
  window.setToolTip("QWidget");
  window.show();

  return app.exec();
}

The example shows a tooltip for the main QWidget.

window.setWindowTitle("ToolTip");

We set a tooltip for the QWidget widget with the setToolTip method.

Qt5 Cursors

A cursor is a small icon that indicates the position of the mouse pointer. In the next example will show various cursors that we can use in our programs.

cursors.cpp

#include <QApplication>
#include <QWidget>
#include <QFrame>
#include <QGridLayout>

class Cursors : public QWidget {

 public:
     Cursors(QWidget *parent = nullptr);
};

Cursors::Cursors(QWidget *parent)
    : QWidget(parent) {

  auto *frame1 = new QFrame(this);
  frame1->setFrameStyle(QFrame::Box);
  frame1->setCursor(Qt::SizeAllCursor);

  auto *frame2 = new QFrame(this);
  frame2->setFrameStyle(QFrame::Box);
  frame2->setCursor(Qt::WaitCursor);

  auto *frame3 = new QFrame(this);
  frame3->setFrameStyle(QFrame::Box);
  frame3->setCursor(Qt::PointingHandCursor);

  auto *grid = new QGridLayout(this);
  grid->addWidget(frame1, 0, 0);
  grid->addWidget(frame2, 0, 1);
  grid->addWidget(frame3, 0, 2);

  setLayout(grid);
}

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);

  Cursors window;

  window.resize(350, 150);
  window.setWindowTitle("Cursors");
  window.show();

  return app.exec();
}

In this example, we use three frames. Each of the frames has a different cursor set.

auto *frame1 = new QFrame(this);

A QFrame widget is created.

frame1->setFrameStyle(QFrame::Box);

We set a frame style with the setFrameStyle method. This way we can see the boundaries of the frames.

frame1->setCursor(Qt::SizeAllCursor);

A cursor is set to the frame with the setCursor method.

auto *grid = new QGridLayout(this);
grid->addWidget(frame1, 0, 0);
grid->addWidget(frame2, 0, 1);
grid->addWidget(frame3, 0, 2);
setLayout(grid);

This will group all the frames into one row. We talk more about this in the layout management chapter.

Qt5 QPushButton

In the next code example, we display a push button on the window. By clicking on the button we close the application.

pushbutton.cpp

#include <QApplication>
#include <QWidget>
#include <QPushButton>

class MyButton : public QWidget {

 public:
     MyButton(QWidget *parent = nullptr);
};

MyButton::MyButton(QWidget *parent)
    : QWidget(parent) {

  auto *quitBtn = new QPushButton("Quit", this);
  quitBtn->setGeometry(50, 40, 75, 30);

  connect(quitBtn, &QPushButton::clicked, qApp, &QApplication::quit);
}

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);

  MyButton window;

  window.resize(250, 150);
  window.setWindowTitle("QPushButton");
  window.show();

  return app.exec();
}

In this code example, we use the concept of the signals and slots for the first time.

auto *quitBtn = new QPushButton("Quit", this);
quitBtn->setGeometry(50, 40, 75, 30);

We create a new QPushButton. We manually resize it and place it on the window with the setGeometry method.

connect(quitBtn, &QPushButton::clicked, qApp, &QApplication::quit);

When we click on the button, a clicked signal is generated. A slot is the method which reacts to the signal. In our case it is the quit slot of the main application object. The qApp is a global pointer to the application object. It is defined in the QApplication header file.

Plus minus

We finish this section showing how widgets can communicate. The code is split into three files.

plusminus.h

#pragma once

#include <QWidget>
#include <QApplication>
#include <QPushButton>
#include <QLabel>

class PlusMinus : public QWidget {

  Q_OBJECT

  public:
    PlusMinus(QWidget *parent = nullptr);

  private slots:
    void OnPlus();
    void OnMinus();

  private:
    QLabel *lbl;
};

This is the header file of the example. In this file, we define two slots and a label widget.

class PlusMinus : public QWidget {

  Q_OBJECT
...

The Q_OBJECT macro must be included in classes that declare their own signals and slots.

plusminus.cpp

#include "plusminus.h"
#include <QGridLayout>

PlusMinus::PlusMinus(QWidget *parent)
    : QWidget(parent) {

  auto *plsBtn = new QPushButton("+", this);
  auto *minBtn = new QPushButton("-", this);
  lbl = new QLabel("0", this);

  auto *grid = new QGridLayout(this);
  grid->addWidget(plsBtn, 0, 0);
  grid->addWidget(minBtn, 0, 1);
  grid->addWidget(lbl, 1, 1);

  setLayout(grid);

  connect(plsBtn, &QPushButton::clicked, this, &PlusMinus::OnPlus);
  connect(minBtn, &QPushButton::clicked, this, &PlusMinus::OnMinus);
}

void PlusMinus::OnPlus() {

  int val = lbl->text().toInt();
  val++;
  lbl->setText(QString::number(val));
}

void PlusMinus::OnMinus() {

  int val = lbl->text().toInt();
  val--;
  lbl->setText(QString::number(val));
}

We have two push buttons and a label widget. We increase or decrease the number displayed by the label with the buttons.

connect(plsBtn, &QPushButton::clicked, this, &PlusMinus::OnPlus);
connect(minBtn, &QPushButton::clicked, this, &PlusMinus::OnMinus);

Here we connect the clicked signals to their slots.

void PlusMinus::OnPlus() {

  int val = lbl->text().toInt();
  val++;
  lbl->setText(QString::number(val));
}

In the OnPlus method, we determine the current value of the label. The label widget displays a string value, so we must convert it to the integer. We increase the number and set a new text for the label. We convert a number to the string value.

main.cpp

#include "plusminus.h"

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);

  PlusMinus window;

  window.resize(300, 190);
  window.setWindowTitle("Plus minus");
  window.show();

  return app.exec();
}

This is the main file of the code example.