C

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

Qt Quick Ultraliteでのスタイルの使用方法を解説します。

概要

この例では、QtQuick.Controls のカスタムスタイルを定義および使用する方法について説明します。同じコードを2回コンパイルします。1回目はデフォルトスタイルを使用したstyling_default として、2回目はカスタムスタイルを使用したstyling_custom としてコンパイルします。スタイルの切り替えは、プロジェクトのCMakeLists.txt 内でのみ行われます。

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

デフォルトの QtQuick Controls スタイルを使用したスタイリング例。標準の Button および CheckBox コントロールが表示されています。

カスタムスタイルを使用したスタイリング例。変更を加えたButtonおよびCheckBoxコントロールが表示されています。

プロジェクト構造

CMakeプロジェクトファイル

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

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

1つ目のターゲットはデフォルトのスタイルを使用し、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"
                ]
        }
}

このファイルでは、URICustomControls を持つ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 ライセンスの下で利用可能です。
詳細はこちら。