Qt Quick Designer

Next, we will look at the Qt Quick Designer layout for the Qt Quick Application project. When you open up a .ui.qml file, Qt Quick Designer, the designer tool included in the Qt Creator toolset, will be launched automatically for you.

Those of you who have followed all the example projects since the very first chapter of this book may realize the Qt Quick Designer looks a bit different from the one we have been using all this time. This is because the Qt Quick project is very different from the Qt Widgets project, so naturally the designer tool should also look different to suit its needs.

Let's look at how the Qt Quick Designer looks in the Qt Quick project:

  1. Library: The Library window displays all the QML types available for the current project. You can click and drag it to the canvas window to add it to your UI. You can also create your own custom QML type and display it here.
  2. Resources: The Resources window displays all the resources in a list, which can then be used in your UI design.
  3. Imports: The Imports window allows you to import different Qt Quick modules into your current project.
  4. Navigator: The Navigator window displays the items in the current QML file as a tree structure. It's similar to the object operator window in the Qt Widgets Application project.
  5. Connections: The Connections window consists of several different tabs: Connections, Bindings, Properties, and Backends. These tabs allow you to add Connections (signal-and-slot), Bindings, and Properties to your QML file, without switching over to Edit mode.
  6. State Pane: State pane displays the different states in the QML project that typically describe UI configurations, such as the UI controls, their properties and behavior, and available actions.
  7. Canvas: Canvas is the working area where you design your application UI.
  8. Properties Pane: Similar to the property editor we used in Qt Widgets Application projects, the Properties pane in the QML designer displays the properties of the selected item. You can immediately see the result in the UI after changing the values here.