C

スタイルの制御

コントロールのカスタマイズ

場合によっては、アプリケーションの UI の一部に別のスタイルを適用し、他の部分には共通または標準のスタイルを使用したいことがあるでしょう。現在使用しているスタイルには満足しているものの、特定のボタンに特別な意味を持たせたいといった場合などです。

このボタンを作成する1つの方法は、必要な場所にその場で定義することです。たとえば、デフォルトのスタイルのボタンの角が直角であることに満足できない場合などです。角を丸くするには、background 項目をオーバーライドし、Rectangleのradiusプロパティを設定します。

import QtQuick 2.15
import QtQuick.Controls 2.15
Rectangle {
    id: root
    color: "#d7d1df"
    readonly property int leftMargin: 10
    readonly property int rowSpacing: 14
    Button {
        id: button
        text: qsTr("A Special Button")
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "#d6d6d6" : "#f6f6f6"
            radius: 4
        }
    }
}

前述のボタンを作成するもう一つの便利な方法は、別のファイル（例えばMyButton.qml ）で定義することです。この方法は、そのボタンを複数の場所で使用する予定がある場合に非常に役立ちます。

import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
    id: btn
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: btn.down ? "#d6d6d6" : "#f6f6f6"
        radius: 4
    }
}

アプリケーションでこのコントロールを使用するには、そのファイル名を指定して参照します：

Item{
    Rectangle {
        id: root
        color: "#d7d1df"
        readonly property int leftMargin: 10
        readonly property int rowSpacing: 14
        MyButton {
            id: button
            text: qsTr("A Special Button")
        }
    }
}

デフォルトおよびカスタムスタイル

Qt Quick とQt Quick Ultraliteのスタイルの違い

Qt Quick Ultraliteでは現在、デフォルトのスタイルのみが提供されています。
Qt Quick Ultralite はコンパイル時のスタイル設定のみをサポートしています。
スタイル付きコントロールを定義するために使用される、スタイルが適用されていないデフォルトのコントロールは、QtQuick.Templates にあります。
スタイルモジュールは、qmlproject ファイルで定義し、利用側のプロジェクトのModuleFiles ノードに追加する必要があります。
qmlproject プロパティのMCU.Config.controlsStyleは、カスタムスタイルモジュールの URI に設定する必要があります。

コントロールのデフォルトスタイルの使用

コントロールのデフォルトスタイルを使用するには、.qml ファイル内でQtQuick.Controls をインポートする必要があります。

コントロールのカスタムスタイルの作成と使用

一般的に、Qt Quick Ultralite では、カスタムスタイルの定義に関してQt Quick のアプローチに従います。Qt Quick のアプローチの詳細については、「 Qt Quick コントロールのカスタマイズ」を参照してください。

コントロールのカスタムスタイルを作成するには：

QtQuick.Templates に基づいて、そのスタイル用のカスタムコンポーネントを実装します。
QtQuick.Templates モジュールに含まれるコンポーネントには、有用な基本機能が備わっており、デフォルトのスタイルコントロールと互換性のあるコンポーネントを簡単に作成できます。
カスタムスタイル用のQMLモジュールを作成します。
このモジュールは、.qmlproject ファイル、QMLファイル、C++ヘッダー、および画像リソースで構成されます。
```
MyControlsStyle/Button.qml
MyControlsStyle/button-background.png
MyControlsStyle/Helper.h
MyControlsStyle/MyControlsStyle.qmlproject
```

コントロールにカスタムスタイルを適用するには：

qmlproject ファイルでスタイルモジュールを定義し、それを利用先のプロジェクトの `ModuleFiles ` ノードに追加します。
MCU.Config.controlsStyle のqmlprojectプロパティをカスタムスタイルモジュールのURIに設定することで、QtQuick.Controls が提供されるようになります。
上記の例では、MCU.Config.controlsStyle: "MyControlsStyle" を使用します。
`.qml ` ファイル内で `QtQuick.Controls ` をインポートします。

参考として、「Qt Quick Ultralite スタイリングの例」を参照してください。

画像デコーダの統合

特定のQtライセンスの下で利用可能です。
詳細はこちらをご覧ください。