C

Qt Quick ウルトラライトスタイリング例

Qt Quick Ultralite でスタイルを使用する方法を示します。

概要

この例では、カスタムQtQuick.Controls スタイルを定義して使用する方法を示します。同じコードを2回コンパイルします。1回はデフォルト・スタイルでstyling_default 、もう1回はカスタム・スタイルでstyling_custom 。スタイルの切り替えは、プロジェクトのCMakeLists.txt でのみ行われます。

カスタム・スタイルの詳細については、スタイリング・コントロールを参照してください。

プロジェクトの構造

CMakeプロジェクトファイル

CMakeLists.txt ファイルには2つのターゲットが定義されています：

...
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)
...

2番目のターゲット (styling_custom) はstyles/custom ディレクトリのスタイルを使用します。これはCustomControls にリンクされており、MCU.Config.controlsStyle QmlProject プロパティとしても設定されています。これら2つの操作により、デフォルトのスタイルがその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"
                ]
        }
}

CustomStyleLib CustomControls Qul::Controls CheckBox.qml 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 コントロールとは異なります。これは、新しい円形インジケータを使用しています。

ファイル

詳細はこちら。