Qt Getting started with Qt Basic application with QtCreator and QtDesigner

Example

QtCreator is, at the moment, the best tool to create a Qt application. In this example, we will see how to create a simple Qt application which manage a button and write text.

To create a new application click on File->New File or Project:

Then choose the Projects->Application->Qt Widgets Application

Then you can choose the name and path of your project :

Next, you can choose the kits you will be using. If you don't have any kit, QtCreator will create a kit with your Qt version and the main compiler of your computer. If you don't have any compiler, you can install one. On Windows: install Visual Studio. On Linux/Mac : install g++ or clang++.

Then you can choose the name of your main window class, the inherited class, the name of the file corresponding to your main window class. If you are learning or testing Qt, you don't really need to change them.

The last step can be to choose a subproject of this project and to add a version control such as git and svn. Again if it's only for tests, you don't need to change them.

Then click on the Finish Button. Now you should be here:

This is the base of your application. if you run it now by clicking on Build->Run or ctrl+R (by default) you will see an empty window.

Now we will add a text and a button. to do that, we will use Qt Designer. Double click on the mainwindow.ui So now you should see: (if not and you see some xml file, click on the Design button at the left)

Here Qt Designer ! Seems quite complicated. But once you get used to it, it really great. We will add some text and a button. On the left, there is the list of the items. You can click on one and drag&drop the objects. Click on the Push Button and drop it in the window. Then search the Label, and do the same (you have a filter at the top left where you can write the object you are looking for).

You should have something like this now:

By double clicking of the object, you can change the text on them. Or you can see at the bottom right the properties of the object you are now and find the text property. Here you can also change the name.

Now if you save and run (better click on the edit button then save again to be sure your modifications has been saved), you get:

Huh? Why my label and button are like that when I run ? It's because there is no layout in our central object. By the way, if you resize your main window, you can see that the object are keeping their place. So to fix it we will add a layout. Let's say a vertical layout. So drag and drop a vertical layout from the object list at the left. Now you should see:

A floating layout.

So now right click on the main window, anywhere except on the label and button. c\Click on Lay out->Lay Out Vertically. Now you should see that your objects a vertically aligned in your window. So now Move (with drag and drop again) your label and button in the layout. now you should get:

In your designer. And if you run you application:

Here you can see your application with the label and the button. And if you resize your window, the label and button are resizing too.

But our button is still doing nothing. We can change it in 2 different ways. The first is to connect the button with a method we created. We can do it with the method name connect. So let's go back to our code and go to mainwindow.cpp now add:

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));

In the constructor of your MainWindow AFTER the ui->setupUI(this); which initialize the ui.

Then we can create the MainWindow::whenButtonIsClicked() in our .cpp class which could change the text of the label like that:

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

And in our mainwindow.h, we need to add:

public slots:
    void whenButtonIsClicked();

Public slots mean that this method can be called when a signal is received. connect link the signal when we click on the button and a method to call.

So now if we run our application and click on the button, we get:

Which mean that our connect is working. But with Qt Designer we have an even simpler way to do it. If you want to do the other way, remove the connect to unconnect the button (because we will connect it differently), go back to mainwindow.ui and right click on the button. Click on Go to slot... , select clicked() and press ok.

Then you should be moved to this function:

void MainWindow::on_pushButton_clicked()
{
}

This is the function which will be called when you click on the button. So you can add

ui->label->setText("it's even easier !");

Into it. Go to the mainwindow.h to save the change (when you do a go to slot, it create a method linked with the signal you asked for. It define the function in the .h but don't save it. So you should go to the file and save it).

And now when you run your application and press the button, you can see the new message (if you still see the old one, is that you didn't remove the connect).

We can also add an int, double, etc in our label thanks to the QVariant which is an awesome class which can convert many thing in many others things. So left add an int which increase when we push the button.

So the .h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H

The .cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

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

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}

And now, we can save and run again. Every time you click on the button, it show "it's even easier ! " with the value of _smallCounter. So you should have something like:

This tutorial is done. If you want to learn more about Qt, let's see the other examples and documentation of Qt on the StackOverflow Documentation or the Qt Documentation