C

コントロール・スタイリング

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

場合によっては、アプリケーションの UI の一部に異なるスタイルを使用し、他の部分は共通または標準のスタイルを使用したいと思うかもしれません。おそらく、使用しているスタイルには満足しているが、特別な意味を持つ特定のボタンがあるとします。

このボタンを作成する1つの方法は、必要な場所にそのボタンを定義することです。例えば、デフォルトスタイルのボタンの角が四角いことに不満があるとします。角を丸くするには、background アイテムをオーバーライドして、Rectangle の半径プロパティを設定します：

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 ノードに追加する必要があります。
MCU.Config.controlsStyleqmlproject プロパティには、カスタム・スタイル・モジュールの 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 ノードに追加します。
QtQuick.Controls を提供するように、MCU.Config.controlsStyle qmlproject プロパティをカスタム・スタイル・モジュールの URI に設定します。
上記の例では、MCU.Config.controlsStyle: "MyControlsStyle" を使用します。
.qml ファイルにQtQuick.Controls をインポートします。

参考として、Qt Quick Ultralite styling Exampleを参照してください。

画像デコーダーの統合

特定の Qt ライセンスの下で利用可能です。
詳細を参照してください。