C
Qt Quick Ultralite styling Example
Demonstrates how to use styles in Qt Quick Ultralite.
Overview
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_add_target(styling_default QML_PROJECT styling_default.qmlproject GENERATE_ENTRYPOINT) app_target_setup_os(styling_default) ...
First one uses the default styling, and is linked to Qul::Controls
... # qul_add_target(styling_custom QML_PROJECT styling_custom.qmlproject GENERATE_ENTRYPOINT) # app_target_setup_os(styling_custom) ...
While the second target (styling_custom
) uses styles from the styles/custom
directory. It's linked to CustomControls
, which is also set as the MCU.Config.controlsStyle
QmlProject property. These two operations switch the default style to CustomControls
through its URI.
The CustomControls
style has its own QmlProject file:
MCU.Module { uri: "CustomControls" } QmlFiles { files: ["Button.qml", "CheckBox.qml"] } ModuleFiles { MCU.qulModules: [ "Qul::ControlsTemplates", // 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. "Qul::Controls" ] } }
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.
Files:
Available under certain Qt licenses.
Find out more.