Qt Quick Ultralite 样式化范例

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 .

工程结构

CMake 工程文件

CMakeLists.txt file defines two targets:

...
qul_add_target(styling_default)
qul_target_qml_sources(styling_default styling.qml)
target_link_libraries(styling_default Qul::QuickUltraliteControlsStyleDefault
)
app_target_setup_os(styling_default)
app_target_default_entrypoint(styling_default styling)
...

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

...
qul_add_target(styling_custom)
add_subdirectory(styles/custom)
qul_target_qml_sources(styling_custom styling.qml)
set_property(TARGET styling_custom PROPERTY QUL_CONTROLS_STYLE CustomControls)
target_link_libraries(styling_custom CustomStyleLib
)
app_target_setup_os(styling_custom)
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.

CustomControls style has its own CMake project file:

qul_add_qml_module(CustomStyleLib
    URI CustomControls
    QML_FILES
        Button.qml
        CheckBox.qml
    IMPORTS
        QtQuick
        QtQuick.Templates
)
target_link_libraries(CustomStyleLib
    Qul::QuickUltraliteTemplates
    # 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::QuickUltraliteControlsStyleDefault)

Which, defines CustomStyleLib with URI CustomControls and is linked to Qul::QuickUltraliteControlsStyleDefault only because it is used in CheckBox.qml 。若 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::QuickUltraliteControlsStyleDefault library. For the styling_custom target, objects from CustomStyleLib are used.

Custom style

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")
    }
}

例如， CheckBox indicator is different compared to to a CheckBox control using a default style. It uses a new circular indicator.

文件：