Qt Quick Designer in Qt Creator 4.3

For Qt Creator 4.3 we added many new features to the Qt Quick Designer.

Integrated text editor

The most obvious addition is an integrated text editor in the Design mode that also allows editing the QML code side by side with the form editor as a preview.
Besides being able to edit QML code while seeing a preview also the property editor can be used together with the text editor. Qt Quick Designer will always select the item that currently contains the cursor.

So if you just forgot the name of a property or enum, you can now use the property editor instead. Switching between the form editor and the integrated text editor is also a lot faster than switching between Edit and Design mode. This makes it more convenient to move to the integrated text editor to refactor or clean up something.

The style in Qt Quick Designer side by side editing

Here we style a button from Qt Quick Controls 2
using the form editor as a preview. Qt Quick Designer now also shows common actions as part of the selection rectangle. In case you selected a Rectangle you can easily set the color.



Another directly visible change is the new toolbar. We added the toolbar to make certain operations more visible to the user that were hidden in context menus before. For example, you can automatically lay out multiple selected items in a row, column or grid layout.


Qt Quick Designer now reads the qtquickcontrols2.conf configuration from Qt Quick Controls 2 and enables you to change the Qt Quick Controls 2 style on the fly using the toolbar. This is especially useful if you want to quickly see how your UI looks with different styles.

Tab Bar

Managing a StackLayout and an attached TabBar has become a lot easier.

You can easily add new Items to the stack layout and navigate between the active Item. And using
the context menu you can add a TabBar to an existing StackLayout. The required anchors and bindings are set up automatically.


Qt 5.9 comes with an example that shows how to define your own custom style for Qt Quick Controls 2 and use this style in Qt Quick Designer.


The user just has to add the custom style to the project. The location of the subdirectory containing the style has to be next to the qtquickcontrols2.conf file.
In the configuration file, the style has to be the name of the subdirectory.

Qt Quick Designer then shows all QML forms using the custom style.

In the example we combine this with a QML plugin containing a singleton defining all constants and colors. This makes adjusting and maintaining a style a lot easier.

Move Component into Separate File

Another very useful feature is Move Component into Separate File.


This was already available in the Edit mode for a long time, but now it is also possible in the Design mode and the feature got improved. The user now can select which properties are set inside the component and which properties are in the original instance. In the nscreenshot we move the button with a custom background into the component MyButton.qml.

Mock up C++

The contact list example shows how to use QML_DESIGNER_IMPORT_PATH in the .pro file.


The QML_IMPORT_PATH setting informs the code model and Qt Quick Designer about imports, whereas the new QML_DESIGNER_IMPORT_PATH introduces a specific import path just for Qt Quick Designer.
This enables you to use different components in Qt Quick Designer from those used in the actual application. This is very useful to mock complex items or in this case, a list model written in C++. We simply use ListModel to create a simple model that is then used in Qt Quick Designer.


States and state machines

We created the traffic light example that shows how to use QML and Qt Quick Designer together with a SCXML state machine.


To achieve this, we add QML states and bind those to the SCXML state machine.


To manage the QObject that represents the SCXML state machine, we added the Backends tab to the connections editor. This makes it easier to make QObjects that represent the C++ backend available
and to bind properties or states to those.


Another new feature is the ability to edit the when condition of states. This makes it easy to map QML states to the states of the SCXML state machine. The expressions for the when condition are edited with the same
editor that is used for expression bindings in the property editor. The expression editor does support auto completion.

It is now also possible to change the type of an item by double clicking on the type name in the property editor. This also enables you to change the type of the root item.
Users of High DPI displays will like the fact that the form editor is now supporting High DPI and all items are rendered in High DPI for such displays.

Last but not least we moved the states editor to the bottom and it is collapsed by default. Our experience is that many QML forms do not use states, so the valuable screen estate on the top was wasted in those cases.

Blog Topics: