C

Qt Quick Ultralite 样式示例

演示如何使用 Qt Quick Ultralite 中的样式。

概览

此示例演示了如何定义和使用自定义 QtQuick.Controls樣式。相同的代码编译两次，一次作为 styling_default 使用默认样式，另一次作为 styling_custom 使用自定义样式。样式的切换仅在项目的 CMakeLists.txt 中进行。

您可以在样式控件中了解更多关于自定义样式的信息。

项目结构

CMake 项目文件

CMakeLists.txt 文件定义了两个目标

...
qul_add_target(styling_default QML_PROJECT styling_default.qmlproject GENERATE_ENTRYPOINT)
app_target_setup_os(styling_default)
...

第一个使用默认样式，并链接到 Qul::Controls

...
# qul_add_target(styling_custom QML_PROJECT styling_custom.qmlproject GENERATE_ENTRYPOINT)
# app_target_setup_os(styling_custom)
...

而第二个目标（styling_custom）使用 styles/custom 目录中的样式。它链接到 CustomControls，也被设置为 QmlProject 属性 MCU.Config.controlsStyle。这两个操作通过其 URI 将默认样式切换为 CustomControls。

CustomControls 样式有自己的 QmlProject 文件

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

该文件定义了含有 URI CustomControls 的 CustomStyleLib，并且仅因为它在 CheckBox.qml 中被使用而链接到 Qul::Controls。如果 CheckBox 从头开始实现，则无需链接到此库。

默认样式

此 styling.qml 文件使用了来自 QtQuick.Controls 模块的 QML 类型。对于 styling_default 目标，定义来自于 Qul::Controls 库。对于 styling_custom 目标，使用 CustomStyleLib 中的对象。

自定义样式

Button.qml 和 CheckBox.qml 文件使用自定义样式重新实现了 Button 和 CheckBox 控件。

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 控件相比，CheckBox 指示器有所不同。它使用了新的圆形指示器。

文件

在某些Qt许可证下可用。
了解更多。