Creating a simple Qt Quick application

Let's create our first Qt Quick application using Qt 6. A Hello World program is a very simple program that displays Hello World!. The project uses minimal—and the most basic—code. For this project, we will use the project skeleton created by Qt Creator. So, let's begin! Proceed as follows:

1. To create a new Qt Quick application, click on the File menu option on the menu bar or hit Ctrl + N. Alternatively, you can also click on the New Project button located on the welcome screen. Then, a window will pop up for you to choose a project template. Select Qt Quick Application - Empty and click the Choose... button, as shown in the following screenshot:
   

   Figure 4.2 – New Qt Quick application wizard

2. In the next step, you will be asked to choose a project name and a project location. You can navigate to the desired project location by clicking the Browse… button. Let's name our sample project SimpleQtQuickApp. Then, click on the Next button to proceed to the next screen, as shown in the following screenshot:
   

   Figure 4.3 – Project location selection screen

3. In the next step, you can select a kit from a set of kits to build and run your project. To build and run a project, at least one kit must be active and selectable. Select the default Desktop Qt 6.0.0 MinGW 64-bit kit. Click on the Next button to proceed to the next screen. This can be seen in the following screenshot:
   

   Figure 4.4 – Kit selection screen

4. The next step is to add your Qt Quick project to the installed version control system (VCS). You may skip version control for this project. Click on the Finish button to create a project with the generated files, as shown in the following screenshot:
   

   Figure 4.5 – Project management screen

5. Once a project has been created, Qt Creator will automatically open up a file from your project, called main.qml. You will see a type of script that is very different from your usual C/C++ projects, as shown in the following screenshot:
   

   Figure 4.6 – Code editor screen showing the main.qml file

   The QML runtime is implemented in C++ in the QtQml module. It contains a QML engine that is responsible for the execution of QML. It also holds the contexts and properties that will be accessible for the QML elements. Qt provides a QQmlEngine class for instantiating the QML components. You can also use the QQmlApplicationEngine class to load the application with a single QML file in a convenient way, as shown here:

   #include <QGuiApplication>
   #include <QQmlApplicationEngine>
   int main(int argc, char *argv[])
   {
       QGuiApplication app(argc, argv);
       QQmlApplicationEngine engine;
       const QUrl url(QStringLiteral("qrc:/main.qml"));
       engine.load(url);
       return app.exec();
   }

   You can also use the QQuickView class, which provides a window for displaying a Qt Quick UI. This approach is little old. QQmlApplicationEngine has a convenient central application functionality with QML, whereas QQuickView is normally controlled from C++. The following code snippet shows how to use QQuickView to load a .qml file:

   #include <QGuiApplication>
   #include <QQuickView>
   int main(int argc, char *argv[])
   {
       QGuiApplication app(argc, argv);
       QQuickView view;
       view.setResizeMode(
           QQuickView::SizeRootObjectToView);
       view.setSource(QUrl("qrc:/main.qml"));
       view.show();
       return app.exec();
   }

   QQuickView doesn't support using Window as a root item. If you want to create your root window from QML, then opt for QQmlApplicationEngine. While using QQuickView, you can directly use any Qt Quick element, as shown in the following code snippet:

   import QtQuick
   Item  {
       width: 400
       height: 400
       Text {
             anchors.centerIn: parent
             text: "Hello World!"
       }
   }

6. Next, you can build and run the Qt Quick project by clicking on the green arrow button located at the bottom-left corner of the integrated development environment (IDE), as shown in the following screenshot:
   

   Figure 4.7 – The build and run option in Qt Creator

7. Now, hit the Run button to build and run the application. Soon, you will see a UI with Hello World!, as shown in the following screenshot:

Figure 4.8 – Output of the Hello World UI

You can run the application from the command line on Windows, as follows:

>SimpleQtQuickApp.exe

You can also run the application from the command line on Linux distributions, as follows:

$./SimpleQtQuickApp

In command-line mode, you may see a few error dialogs if the libraries are not found in the application path. You can copy the Qt libraries and plugin files to that binary folder to resolve the issue. To avoid these issues, we will stick to Qt Creator to build and run our sample programs. You can switch between different kits by going to the project interface and selecting a kit based on your preferences. Please remember that you need to run qmake after you make changes to your .pro file. If you are using the command line, then proceed with the following commands:

>qmake
>make

You can also create a Qt Quick 2 UI project with a QML entry point without using any C++ code. To use it, you need to have a QML runtime environment such as qmlscene set up. Qt Creator uses .qmlproject to handle QML-only projects:

1. To create a Qt Quick 2 UI project, select Qt Quick 2 UI Prototype from the new project template screen, as shown in the following screenshot:
   

   Figure 4.9 – Qt Quick UI Prototype wizard

2. Continue clicking the Next button to see the Project Details, Kit Selection, and Project Management screens. These screens are the same as for the Qt quick application project discussed earlier. Click on the Finish button to create a project with a skeleton. Now, have a look at the contents of the QtQuickUIPrototype.qmlproject and QtQuickUIPrototype.qml Qt Creator-generated files.
3. Let's modify the contents of QtQuickUIPrototype.qml to add a Text element and display Hello World!, as illustrated in the following screenshot:
   

   Figure 4.10 – Sample contents of Qt Quick UI Prototype project

4. Now, hit the Run button to build and run the application. Soon, you will see a UI with Hello World!.

You can also run the application from the command line, as follows:

>qmlscene QtQuickUIPrototype.qml

You may have to mention qmlscene and the qml file path in the command line. Use this only if you are prototyping. You cannot create a full application with this. Consider using a Qt Quick application project instead for a full application.

In this section, we learned how to create a simple GUI using the Qt Quick module. In the next section, we will learn how to design a custom UI using the Qt Quick Designer UI.