Qt 5 Hello World Tutorial using Qt Creator

A simple Qt 5 Hello World tutorial that demonstrates how to use Qt Creator to make a GUI application window. Create a window with two text labels and a button in this easy tutorial for beginners. Program the application in C++.

The image below shows the finished Qt GUI window application. When the button is clicked, the text “Hello, world!” is displayed in the first text label. Each time the button is clicked, the count in the second label is incremented.

Qt 5 Hello World Tutorial
Qt 5 Hello World Tutorial

Qt 5 Hello World Tutorial Steps

The following steps show how to create the Qt5 Hello World application using Qt Creator. Before continuing, be sure to install Qt Creator and other required software packages.

1. Start a New Qt Creator Project

Open the Qt Creator application and click the New Project button, or File → New File or Project … from the top menu.

Qt Creator New Project
Qt Creator New Project

In the New Project dialog box choose Qt Widgets Application and then click the Choose… button.

Qt Creator New Qt Widgets Application
Qt Creator New Qt Widgets Application

In the next dialog box enter the name of the project and choose the location to create the project in. Click the Next > button when done.

Qt Creator Project Name and Location
Qt Creator Project Name and Location

The Qt Kit can now be selected. If this is the first time using Qt Creator, you may be prompted to set up a kit. If a kit is already selected, it can be modified by hovering the mouse cursor over the kit name and then clicking the Manage… button that appears after hovering the mouse cursor, e.g. over Desktop in the below image.

Qt Creator Kit Selection
Qt Creator Kit Selection

Click the Next > button and leave the class information at the default values.

Qt Creator Class Information
Qt Creator Class Information

Click the Next > button and then the Finish button.

Qt Creator Summary Dialog Box
Qt Creator Summary Dialog Box

At this stage the Run button can be clicked to build and run the new Qt Creator application (or use Ctrl + R on the keyboard to run). When the application runs, a window will appear that can be resized and closed.

Qt Creator Project
Qt Creator Project

2. Edit the Application Window Graphically

To start editing the new application window in Qt Creator, expand the Forms folder at the top left of Qt Creator. Double-click the mainwindow.ui file that appears. Qt Creator will now change to Design mode allowing the hello application window to be edited.

Open the Main Window Form for Editing in Qt Creator
Open the Main Window Form for Editing in Qt Creator

2.1 Delete Unneeded Widgets from the Main Window

The default Qt Creator application window has a menu bar, tool bar and status bar. These widgets are not needed in this simple Hello World application, so they can be deleted. Each widget in the main window form has corresponding text at the top right of Qt Creator. This makes it easy to delete these widgets as they are difficult to see on the window form when they are empty.

Default Qt Application Window and Widgets
Default Qt Application Window and Widgets

Right-click the text for each widget at the right of Qt Creator and then click Remove on the menu that pops up to delete the widget from the window form.

2.2 Add Text Labels

Drag and drop two Label widgets from the pane at the left of the window form, under Display Widgets. Drop the labels onto the form.

Placing a Text Label in Qt Creator
Placing a Text Label in Qt Creator

2.3 Size the Text Labels

Click one of the text labels on the form, then hold down the Ctrl key and click the second label to select both of them. Now click the Lay Out Vertically button on the toolbar above the form or press Ctrl + L on the keyboard. This will allow both text labels to be resized at the same time while keeping them aligned. Resize the text labels making them longer by dragging on one of the square handles around the labels. The labels can also be moved to the desired position on the window form.

Resizing Labels in Qt Creator
Resizing Labels in Qt Creator

2.4 Middle Align the Label Text

Text in both labels can be aligned to the middle of the label box by first selecting both labels. Be sure to click one label, hold down the Ctrl key and then click the other label. This is different than selecting the vertical layout box added for aligning and sizing the text boxes in the previous step.

In the bottom right pane of Qt Creator, scroll down to find alignment under QLabel. If the alignment property is not expanded, expand it by clicking the arrow at the left of it. Now click in the value field to the right of Horizontal and select AlignHCenter. Both text labels will now be center aligned.

Align Label Center in Qt Creator
Align Label Center in Qt Creator

2.5 Change the Label Name and Text

Click the top label on the window form and then change the label name next to objectName under QObject in the right bottom pane. Change the label name to lblHello. Change the label text to next to text under QLabel.

Change Label Name and Text
Change Label Name and Text

Do the same for the second label, but change the label name to lblCount.

Change the Name and Text of the Second Label
Change the Name and Text of the Second Label

2.6 Add and Edit a Button Widget

Add a Push Button to the window form by dragging and dropping it from the left widget pane under Buttons.

Place Button in Qt Creator
Place Button in Qt Creator

Make sure that the button is selected on the form. Change the name of the button to btnHello and the text of the button to Hello in the same way as the labels were edited.

Changing Button Name and Text in Qt Creator
Changing Button Name and Text in Qt Creator

3. Connecting the Button to Code

We now want to connect the button to the code that will run when it is clicked. Right-click the button on the form and select Go to slot… on the menu that pops up. Choose clicked() in the dialog box that pops up and then click the OK button.

Adding a Button Click Handler in Qt
Adding a Button Click Handler in Qt

Qt Creator will now switch to the member function that will be called when the button is clicked.

4. Application Operational Code

The application code can now be written. The code writes “Hello, world!” to the first text label in the window and increments a count in the second text label every time that the button is clicked.

The code listing below shows the code added to the button click handler in the mainwindow.cpp file.

Static integer count holds the count value that is incremented on each button click. The first time that the application runs, both labels will contain the text … which will be replaced by the “Hello, world!” text message and the incrementing count.

Each label is accessed by its name that was set in the GUI editor. Widgets are all accessed as member pointers of the user interface object (ui) and so pointer notation is used, e.g. ui->widget name

5. Change Window Size and Text

To switch back to editing the window form, click mainwindow.ui at the bottom left of Qt Creator under Open Documents. Qt Creator will change back to Design mode.

Changing to Qt Creator Design Mode
Changing to Qt Creator Design Mode

5.1 Change Window Size

Click the main window form and use the sizing handles to size the window to the desired size. The window size can also be changed by selecting the window and changing the Width and Height under QWidget and geometry in the bottom right Qt Creator pane.

5.2 Change Window Title Text

With the window form selected in Qt Creator, find windowTitle under QWidget in the bottom right pane of Qt Creator. In the image below, the window title was changed to “Hello Application”. This text will now appear in the top title bar of the application window when it is run.

Change Window Title of Qt Creator Application
Change Window Title of Qt Creator Application

6. Build and Run the Application

Save changes to the project. This can be done using File → Save All from the top menu or Ctrl + Shift + S on the keyboard.

The Qt 5 Hello World Tutorial project can be built by clicking the hammer icon on the left toolbar of Qt Creator. The application can be run by clicking the green triangle icon on the left toolbar.

Qt Creator Build Project and Run Buttons
Qt Creator Build Project and Run Buttons

Qt 5 Hello World Tutorial Development Environment

This tutorial was developed on a Linux Mint 18 Mate 64-bit computer using Qt Creator 3.5.1 and Qt 5.5.1. Compiled with g++ compiler version 5.4.0.

 

6 thoughts on “Qt 5 Hello World Tutorial using Qt Creator”

  1. Great work, thank you a lot. First tutorial (after trying several others) that I could follow and understand entirely, and works flawless. Regards.

  2. Great job dude. Looks like it’s difficult to find good tutorials about QT (which is, actually, so sad).

    But I was able to follow this one and end it without any problems!

Leave a Reply

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