Designing a basic user interface with QML

This example will teach us how to use Qt Design Studio 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. This time, however, make sure you check on the Creates a project that you can open in Qt Design Studio option as well:

Figure 9.8 – Make sure your project can be opened by Qt Design Studio

2. You will see a QML file in your project resources called 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. Before we proceed to design our program’s user interface, let’s download and install Qt Design Studio from Qt’s official website: https://www.qt.io/product/ui-design-tools. This is a new editor created by Qt for...