Qt Quick Ultralite styling Example

Demonstrates how to use styles in Qt Quick Ultralite.


This example shows how to define and use a custom QtQuick.Controls style. The same code is compiled twice, once as styling_default with the default style, and once as styling_custom with the custom style. The switch between styles is done only in the project's CMakeLists.txt.

You can read more about custom styles in Styling Controls.

Project structure

CMake project file

The CMakeLists.txt file defines two targets:

qul_target_qml_sources(styling_default styling.qml)
target_link_libraries(styling_default PRIVATE Qul::Controls
app_target_default_entrypoint(styling_default styling)

First one uses the default styling, and is linked to Qul::Controls

qul_target_qml_sources(styling_custom styling.qml)
set_property(TARGET styling_custom PROPERTY QUL_CONTROLS_STYLE CustomControls)
target_link_libraries(styling_custom PRIVATE CustomStyleLib
app_target_default_entrypoint(styling_custom styling)

While the second target (styling_custom) uses styles from the styles/custom directory. It's linked to CustomControls, which is also set as the QUL_CONTROLS_STYLE target property. These two operations switch the default style to CustomControls through its URI.

The CustomControls style has its own CMake project file:

    URI CustomControls

target_link_libraries(CustomStyleLib PUBLIC
    # This style links StyleDefault because one of the components is based
    # on a default style component. If it didn't depend on the default style
    # that would be unnecessary.

Which, defines CustomStyleLib with URI CustomControls and is linked to Qul::Controls only because it is used in CheckBox.qml. If CheckBox would be implemented from scratch, linking to this library wouldn't be necessary.

Default style

This styling.qml file uses QML types from the QtQuick.Controls module. For the styling_default target, definitions are taken from the Qul::Controls library. For the styling_custom target, objects from CustomStyleLib are used.

Custom style

The Button.qml and CheckBox.qml files reimplement Button and CheckBox controls with the custom style.

import QtQuick 2.15
import QtQuick.Controls.StyleDefault 1.0 as Base

Base.CheckBox {
    id: control

    indicator: Rectangle {
        x: control.leftPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: control.availableHeight / 2
        height: control.availableHeight / 2
        radius: width / 2
        color: !control.enabled
            ? "gray"
            : (control.checked ? "green" : "red")

For example, the CheckBox indicator is different compared to to a CheckBox control using a default style. It uses a new circular indicator.


Available under certain Qt licenses.
Find out more.