Thomas Hartmann

More of Qt Quick Designer and Qt Quick Controls 2

Published Monday June 6th, 2016
10 Comments on More of Qt Quick Designer and Qt Quick Controls 2
Posted in Qt Quick, Qt Quick 2, Qt Quick Controls, QtCreator

Qt Creator 4.0 is now released and since so many of you asked for it, we now publish the full uncut video that shows how to create the UI of a simple home automation application using the new Qt Quick 2 Controls.

The resulting demo application is available here: Smart Home Demo Application

To use the material style, you have to set this environment variable: QT_LABS_CONTROLS_STYLE=material.

To customize the Material style, we manually import Qt.labs.controls.material 1.0 and set some of the attached properties:

Material.accent: Material.Orange
Material.theme: Material.Dark

One reason why we create PageBackground.qml in this demo is to define those properties once in PageBackground and then to use PageBackground as the root element for each form. The values of those properties are propagated to children in a way similar to using style sheets.

For each part of the UI, such as the side bar or the single tabs, we create a form as a .ui.qml file and a .qml file. While the .ui.qml file contains the layout, the .qml file contains the signal handlers and data models. This way the imperative parts of the implementation are separated from the pure declarative parts that are used for the UI.
Qt Creator supports this workflow by providing the “Goto Implementation” context menu. This makes it easy to implement new signal handlers and to navigate between the different files.

In the navigator, items in the .ui.qml file can be exported as alias properties. This is necessary to access them in the .qml file. This is done automatically when a signal handler is implemented, but for example the combo box is exported manually to define the model in the .qml file.

This approach allows any kind of complex logic in the .qml file while .ui.qml stays simple and declarative and can be opened in the Design mode even in later stages of the development.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt Quick, Qt Quick 2, Qt Quick Controls, QtCreator


Elvis Stansvik says:

This looks neat, and we’re at least looking at using some of the new Quick Controls in a product.

One big problem I see with these controls though is that many of them don’t indicate visually that they’re focused. Is there some easy way to make them do so? Our product has a single input device: A pushwheel button, so no touch or pointer available. It’s therefore imperative that the user can see which control has focus and will react to turns or pushes of the button.

The sliders indicate that they’re focused by scaling up the slider knob slightly (but it’s too subtle for us). The buttons become slightly brighter, but we would still like it to be more distinct. The toggle switches and combobox don’t seem to indicate focus at all.

Elvis Stansvik says:

Also, the radio buttons and dials don’t indicate focus at all. I also noticed what I think is an overall focus related bug: For several of the controls (dial, toggle, more?), interacting with the control using the mouse does not give it focus with regards to the keyboard. E.g. if I first click on say a dial with the mouse, I expect to be able to interact with it using left/right or up/down on the keyboard. Instead the focus is left where it was.

J-P Nurmi J-P Nurmi says:

Hi Elvis, this sounds like you’re using the tech preview shipped with Qt 5.6. In Qt 5.7, we have implemented “focus policies” – a concept familiar from widgets. Buttons, sliders, and combo boxes have a “strong” focus policy by default, meaning that they do now gain focus on click.

Eric says:

Custom Styled Quick Controls 2.0 don’t mix with Loaders, will the final version of those be more tested before release ?

Eric says:

Custom Styled Quick Controls 2.0 don”t mix well with Loaders. Will those be fully tested before release ?

Mitch Curtis Mitch Curtis says:

Is there a bug report for it?

Rainer says:

Great stuff I really like the direction of QtQuick Controls 2.

Christopher W Bruner says:

Thanks for the tutorial, but I have to ask, are you really expecting people to learn from this? High speed playback of design doesn’t help me understand why you are doing what you are doing. I’m a c++ programmer that seems to have a mental block about UI with QT. I don’t understand where this syntax is coming from and what the operands are. Are you just making them up or is there a list of allowable? (id, anchors, currentIndex) also the included files have version numbers on them. How are we to know which ones are appropriate. I appreciate the effort that it takes to do this sort of video, but for me it missed the target.

Mitch Curtis Mitch Curtis says:

Hi Christopher.

Perhaps the QML Book would be a useful resource for you to get started:

You can also take a look at Qt’s own documentation.

I think that it’s difficult to create a video that goes at the right pace for everyone.

Thomas Hartmann Thomas Hartmann says:

The video is showing what is possible with the new Qt Quick 2 Controls and shows a couple of new features of the Qt Quick Designer.
If you are not familiar with Qt Quick/QML at all then the video is not the best place to start. I agree.

Commenting closed.

Get started today with Qt Download now