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.
#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](/img/gui/qt5/simple.png)
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.
#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](/img/gui/qt5/tooltip.png)
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.
#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.
#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](/img/gui/qt5/pushbutton.png)
Plus minus
We finish this section showing how widgets can communicate. The code is split into three files.
#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.
#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.
#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](/img/gui/qt5/plusminus.png)
In this chapter, we created our first programs in Qt5.