ZetCode

First programs in Qt5

last modified January 6, 2022

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.

Simple example
Figure: Simple example

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.

A tooltip
Figure: A tooltip

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 will 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.

A button
Figure: QPushButton

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.

Plus minus
Figure: Plus minus

In this chapter, we created our first programs in Qt5.