Qt5 C++ GUI Programming Cookbook

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, ...