C

Qt Quick Ultralite Controls styling

Differences in styling between Qt5 and Qt Quick Ultralite

  • Qt Quick Ultralite currently provides only default style.
  • Qt Quick Ultralite supports only compile-time styling.
  • Default controls without style used to define a styled controls are located in QtQuick.Controls.Templates.
  • QUL_CONTROLS_STYLE CMake target property must be set to your custom style module's uri
  • The style module must be linked to the application CMake target

Default style for controls

To use the default style for the controls, follow these steps:

  • Link `Qul::QuickUltraliteControlsStyleDefault` library to your CMake project (see: target_link_libraries).
  • Import QtQuick.Controls in the .qml file.

Custom style for controls

To create a custom style for controls, follow these steps:

  • Implement custom components for the style based on QtQuick.Controls.Templates.

    The components in the Templates module have useful baseline functionality and make it easier to create components that end up interchangable with the default style controls.

  • Create a QML module for the custom style.

    The module consists of .qml/.h source and generated files, a qmldir file and a library. Example:

    MyControlsStyle.a
    MyControlsStyle/
    MyControlsStyle/qmldir
    MyControlsStyle/Button.qml (source file)
    MyControlsStyle/Button.h (generated file from qmltocpp)
    MyControlsStyle/Helper.h (source file)
    MyControlsStyle/Helper.qml (generated file from qmlinterfacegenerator)
    ...

To use a custom style for controls:

  • Link your custom style library to the CMake project (see: target_link_libraries).
  • Ensure the custom style QML module is found in the include path (see: target_include_directories).

    Note that it should be set to the path containing the module's directories, not to the path containing the qmldir file. If you have <path>/My/Style/qmldir and want the module uri to be My.Style then set the include path to <path>.

  • Set the QUL_CONTROLS_STYLE CMake target property to your custom style module's uri to make it provide QtQuick.Controls.

    In the above example one would use QUL_CONTROLS_STYLE=My.Style.

  • Import QtQuick.Controls in the .qml file.

See `styling` example for reference.

Available under certain Qt licenses.
Find out more.