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…

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 two QML files in your project resources—main.qml and MainForm.ui.qml. The former is where we implement the logic for our application, and the latter is where we design our user interface. We will start with the UI design, so let's open up MainForm.ui.qml. Once it's been opened by Qt Creator, you will see an entirely different UI editor compared to the one we used in previous chapters. This editor is called the Qt Quick Designer, which is used specifically to design UI for Qt Quick projects. The components of this editor are described as follows:

   • Library: The Library window displays all the predefined QML types that you can add to your UI canvas. You can also import custom...