2.10 Qt Quick Controls (P0 | 1h)

Comment: I changed the title from Container Controls to Qt Quick Controls. This is actually quite a big topic and perhaps should be split into 2-3 sections.

E: Will keep this in mind. In this case the 1 hour time needed for the topic seems to be underestimated? I'm thinking we should outline the topic properly first and do the splits after that

Explanation of the contents of a topic page @ Topic reference page

Back to Week 2

Objective: Qt Quick Controls

Beginner

Intermediate

Basic controls

What are Qt Quick Controls?
What is ApplicationWindow?

Views

What control types exist?
What are container controls?
What is SwipeView?
What is FlickView?
What is TableView?
Wbat is TreeView?

Basic styles

https://doc.qt.io/qt-5.10/qtquickcontrols2-styles.html

What are basic styles?
How do you style controls?
What are default/imaging/material/fusion/universal styles?
How to customise default/imaging/material/fusion/universal styles?

Comment: We could really have three sections: basic controls, including Application Window, then Views: SwipeView, FlickView, TabView, TableView, TreeView (container controls) and then separately styling: basic styles: default, imaging, material, fusion, universal and then how to customise those guys?

E: Like this?

Tino. Looks nice. Qt Quick Layouts? Were they somewhere?

Expert

How to create a new control in C++?

Omitted

Course material content

In most applications, you can expect to see certain types of UI functionality by default. More often than not, you will need some kind of functionality for navigation, input, menus and so on. This is where Qt Quick Controls comes in - it provides a set of controls that can be used to build complete interfaces in Qt Quick. It also provides a set of styles for customization of these controls. You can even customize these styles to some degree!

[Something about version numbering here]

Basic controls

Qt Quick Controls 2 provides QML types for creating user interfaces. These QML types work in conjunction with Qt Quick and Qt Quick Layouts.

Qt Quick Controls 2 QML types can be imported into your application using the following import statement in your .qml file:

 import QtQuick.Controls 2.3

The C++ classes can be included into your application using the following include statement:

 #include <QtQuickControls2>

To link against the corresponding C++ libraries, add the following to your qmake project file:

 QT += quickcontrols2

A basic example of a QML file that makes use of controls is shown here:

 import QtQuick 2.6
 import QtQuick.Controls 2.1

 ApplicationWindow {
      title: "My Application"
      width: 640
      height: 480
      visible: true

      Button {
           text: "Push Me"
           anchors.centerIn: parent
      }
 }

[Something about how applicationwindow is related to qt quick]

Quick Controls provides access to ApplicationWindow, which is a Window which makes it convenient to add a menu bar, header and footer item to the window. Using ApplicationWindow replaces the existing root type, Window.

You can declare ApplicationWindow as the root item of your application, and run it by using QQmlApplicationEngine. In this way you can control the window's properties, appearance and layout from QML.

ApplicationWindow also provides the foundation for popups and supports some basic styling, such as the background color.

There are three properties that are almost always set when using ApplicationWindow: width, height, and visible. Once we've set these, we have a properly sized, empty window ready to be filled with content.

Control types

There are in total 9 different types of controls in Qt Quick Controls 2. You can find a comprehensive list of them here. Most of them are self-explanatory in regard to user interfaces, and a detailed description of them can be found in the Qt Documentation. You can also use the example applications in Qt Creator for reference as to how best make use of these controls.

We will be taking a closer look at some of the controls, namely container controls, SwipeView, FlickView, TableView and TreeView.

https://doc.qt.io/qt-5.10/qtquickcontrols2-containers.html https://doc.qt.io/qt-5.10/qtquick-controls2-qmlmodule.html

https://doc.qt.io/qt-5.10/qml-qtquick-controls2-swipeview.html (navigation, container)

E: As mentioned in Slack, the reference material for this section seems lacking and needs clarification for purposes of writing something meaningful. In general, the documentation is good, BUT and this is a big BUT: There is no clear line between Controls 1 and Controls 2, and it can sometimes be very easy to be reading a page related to 2, but it instead being a page for 1, and there not being that specific page for 2. This is easily the most confusing part of the documentation so far. We need some guidelines on how to proceed with this, as the students will probably have the same issue if they start referencing the documentation. I mean there is no accidental cross linking from controls 2 to controls 1, but sometimes when you google for stuff, you end up on a page thats related to controls 1 which looks almost exactly like the controls 2 page and... you probably get the picture.

Tino: Good point. In online documentation, we are going to add a label or tag to see the version. However, the offline one will be a problem. At least, we could give some warning that pay attention that some types exist both in QQC1 and 2 and we are supposed to use the latter one. We could have at the beginning a section, explaining the differences. QQC1 are QML only, memory consuming (as they need an area or handler for event handling), while QQC2 are partly implemented in C++ (event handling), making them lighter. QQC1 should not be used in mobile and embedded apps.

Basic styles

https://doc.qt.io/qt-5.10/qtquickcontrols2-styles.html

As mentioned earlier, Qt Quick Controls 2 comes with a set of styles to choose from. These styles are:

Default (https://doc.qt.io/qt-5.10/qtquickcontrols2-default.html)
Fusion (https://doc.qt.io/qt-5.10/qtquickcontrols2-fusion.html)
Imagine
Material
Universal

As you can see, the Material and Universal styles have both a light and a dark version of the style.
The main difference between the styles, in addition to different looks, are differences in their system resource requirements.
For best performance, you should use the default style. The imagine style is based on image assets, andcomes with a default set of images that the style uses. The images can be easily changed by providing a directory with images using a predefined naming convention. [Maybe an example of how to do this?] The Material Style offers an appealing design based on the Google Material Design Guidelines, but requires more system resources than the Default style. The Universal Style offers an appealing design based on the Microsoft Universal Design Guidelines, but requires more system resources than the Default style.

Using styles

In order to run an application with a specific style, either configure the style using QQuickStyle in C++, pass a command line argument, or set an environment variable. Alternatively, the preferred style and style-specific attributes can be specified in a configuration file.

The priority of these approaches follows the order they are listed below, from highest to lowest. That is, using QQuickStyle to set the style will always take priority over using the command line argument, for example.

Using QQuickStyle in C++

QQuickStyle provides C++ API for configuring a specific style. The following example runs a Qt Quick Controls 2 application with the Material style:

 QQuickStyle::setStyle("Material");

See the detailed description of QQuickStyle for more details.

Command line argument

Passing a -style command line argument is the convenient way to test different styles. It takes precedence over the other methods listed below. The following example runs a Qt Quick Controls 2 application with the Material style:

 ./app -style material

Environment variable

Setting the QT_QUICK_CONTROLS_STYLE environment variable can be used to set a system-wide style preference. It takes precedence over the configuration file mentioned below. The following example runs a Qt Quick Controls 2 application with the Universal style:

 QT_QUICK_CONTROLS_STYLE=universal ./app

See Supported Environment Variables in Qt Quick Controls 2 for the full list of supported environment variables.

Configuration file

Qt Quick Controls 2 support a special configuration file, :/qtquickcontrols2.conf, that is built into an application's resources.

The configuration file can specify the preferred style (may be overridden by either of the methods described earlier) and certain style-specific attributes. The following example specifies that the preferred style is the Material style.

 [Controls]
 Style=Material

Custom styles

https://doc.qt.io/qt-5.10/qtquickcontrols2-customize.html#creating-a-custom-style

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2.10

Qt Quick Controls (P0 | 1h)