Designing a basic user interface with QML

In this example, we will learn how to use Qt Quick Designer to design our program's user interface.

How to do it...

Let's follow these steps to get started:

1. First of all, create a new Qt Quick application project, just like we did in the previous recipe.

You can also use the previous project files if you wish to.

2. You will see a QML file in your project resources—main.qml. This is where we implement the logic for our application, but we will also need another QML file where we define our user interface.

3. Let's create the QML UI file by going to File | New File or Project, then select QtQuick UI File under Qt category as shown in the following screenshot:

...