素材スタイル

マテリアル・スタイルは、Googleマテリアル・デザイン・ガイドラインに基づいています。詳細...

付属プロパティ

• アクセント: 色
• 背景: 色
• 標高: int
• 前景: 色
• 原色: 色
• テーマ: 列挙
• roundedScale: 列挙
• containerStyle: 列挙

付属メソッド

• 色color(enumeration predefined, enumeration shade)

詳細

マテリアル・スタイルは、Googleマテリアル・デザイン・ガイドラインに基づいています。プラットフォームやデバイスのサイズを問わず、統一されたエクスペリエンスを実現します。

マテリアル・スタイルを使用してアプリケーションを実行するには、 Qt Quick コントロールでスタイルを使用するを参照してください。

カスタマイズ

マテリアル・スタイルはカスタマイズ可能な属性をいくつかサポートしています。これらの属性のいくつかは、fonts と同じように子要素にpropagate ：

• テーマ
• プライマリー
• アクセント
• 前景
• 背景

残りの属性は子には伝搬しない：

• 標高
• 丸みを帯びたスケール
• コンテナスタイル

以下の例では、ウィンドウと3つのラジオボタンは、紫色のアクセントカラーを使用したダークテーマで表示されます：

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

        RadioButton {
            text: qsTr("Small")
        }
        RadioButton {
            text: qsTr("Medium")
            checked: true
        }
        RadioButton {
            text: qsTr("Large")
        }
    }
}

QML 内で属性を指定するだけでなく、環境変数や設定ファイルで指定することも可能です。QML で指定された属性は、他のすべての方法よりも優先されます。

設定ファイル

設定ファイルの詳細については、Qt Quick 制御設定ファイルを参照してください。

環境変数

サポートされている環境変数の全リストは、 Qt Quick Controlsのサポートされている環境変数を参照してください。

依存関係

Material スタイルに固有の属性にアクセスするには、Material スタイルを別途インポートする必要があります。Material スタイルへの参照に関係なく、同じアプリケーション コードが他のどのスタイルでも実行されることに注意してください。マテリアル固有の属性は、アプリケーションがマテリアルのスタイルで実行される場合にのみ効果を発揮します。

常に読み込まれる QML ファイルにマテリアルのスタイルがインポートされている場合、アプリケーションがどのスタイルで実行されてもアプリケーションを実行できるようにするには、マテリアルのスタイルをアプリケーションと一緒に配置する必要があります。ファイル セレクタを使用することで、スタイルに依存することなく、スタイル固有の微調整を適用できます。

定義済みのマテリアル カラー

プライマリ カラーとアクセント カラーにはどのような色でも指定できますが（color ）、Material スタイル パレットの他の部分とうまく調和するように設計された、事前定義済みの色のいずれかを使用することをお勧めします：

利用可能な定義済みカラー

ダークテーマが使用されている場合、デフォルトでは、事前に定義された色の異なる色合いが使用されます：

定義済みの色合い

Material.color()関数に渡すことができる定義済みの色には、それぞれいくつかの異なる色合いがあります：

ベーシックスタイル、ユニバーサルスタイルも参照。

バリアント

マテリアル・スタイルは、ボタンやデリゲートなどのコントロールの高さを小さくし、フォント・サイズを小さくした密なバリアントもサポートしています。マウスとキーボードによってより正確で柔軟なユーザー インタラクションが可能になるデスクトップ プラットフォームでは、dense バリアントを使用することをお勧めします。

dense variant を使うには、環境変数QT_QUICK_CONTROLS_MATERIAL_VARIANT をDense に設定するか、qtquickcontrols2.confファイルでVariant=Dense を指定します。どちらの場合もデフォルト値はNormal です。

以下の画像は、通常のバリアントと密なバリアントを使用した場合のコントロールの違いを示しています：

上記の高さは、各プラットフォームのフォントの違いによって異なる場合があります。

コントロール固有の注意事項

テキストエリア

TextArea は、 と の 2 つのFilled OutlinedcontainerStyles をサポートしています。アウトライン化された TextArea は、コントロールの上部に位置するフローティング・プレースホルダー・テキストを持ちます。このため、 またはその子である Flickable が を に設定すると、プレースホルダ・テキストがコントロールの境界の外に出てしまい、クリッピングされることがあります。これを避けるために、 は、このような場合に適切な値に設定されます。TextArea clip true topInset

マテリアルガイドラインに従って、プレースホルダーテキストは短くし、複数行を使用しないようにしてください。

テキストフィールド

上記でTextArea について説明したクリッピングの問題は、TextField でも発生する可能性があります。これを避けるために、TextField がtrue にクリップを設定するときに、topInset を適切な値に設定します。

マテリアルガイドラインに従い、プレースホルダテキストは短くし、複数行を使用しないようにしてください。

添付プロパティ ドキュメント

この付属プロパティは、テーマのアクセントカラーを保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができます。値は子に伝搬される。

デフォルト値はMaterial.Pink です。

次の例では、ハイライトされたボタンのアクセント・カラーがMaterial.Orange に変更されています：

Button {
    text: qsTr("Button")
    highlighted: true
    Material.accent: Material.Orange
}

このプロパティはテーマの背景色を保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができます。値は子に伝搬される。

デフォルト値はテーマ固有（ライトまたはダーク）です。

次の例では、ボタンの背景色をMaterial.Teal に変更しています：

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

この付属プロパティはコントロールの標高を保持する。標高が高いほど影が深くなる。このプロパティはどのコントロールにもアタッチできますが、すべてのコントロールが標高を視覚化するわけではありません。値は子コントロールには伝搬されない。

デフォルト値はコントロール固有である。

次の例では、昇降カードの外観を実現するために、ペインの昇降を6 に設定しています：

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

このプロパティはテーマの前景色を保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができます。値は子に伝搬される。

デフォルト値はテーマ固有（ライトまたはダーク）です。

次の例では、ボタンの前景色をMaterial.Pink に設定しています：

Button {
    text: qsTr("Button")
    Material.foreground: Material.Pink
}

この添付プロパティはテーマの原色を保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができます。値は子に伝搬される。

原色は、デフォルトでToolBar の背景色として使用されます。

デフォルト値はMaterial.Indigo です。

このプロパティは、テーマが明るいか暗いかを保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができます。値は子に伝搬される。

利用可能なテーマ

themeをSystem に設定すると、システム・テーマ・カラーに基づいてライト・テーマかダーク・テーマのいずれかが選択される。しかし、themeプロパティの値を読み取るとき、その値は決してSystem ではなく、実際のテーマです。

次の例では、ペインとボタンの両方のテーマがMaterial.Dark に設定されています：

Pane {
    Material.theme: Material.Dark

    Button {
        text: qsTr("Button")
    }
}

この付属プロパティは、ターゲットコントロールで使用される角丸の半径を保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができますが、一部のコントロールのみがサポートしています。値は子コントロールには伝搬されない。

デフォルト値はコントロール固有である。

利用可能なスケール：

このプロパティはQt 6.5で追加されました。

こちらも参照してください：マテリアル・スタイル：形状。

この付属プロパティは、ターゲットコントロールが使用するコンテナのスタイルを保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチできますが、デフォルトでサポートしているのはTextField とTextArea のみです。値は子には伝搬されません。

デフォルト値はコントロール固有です。

利用可能なスタイル：

このプロパティはQt 6.5で追加されました。

こちらも参照してください：マテリアル・スタイル：テキストフィールドコンテナ。

添付メソッドのドキュメント

この付属メソッドは、指定された事前定義されたマテリアルカラーと与えられたシェードを組み合わせた有効なカラー値を返します。省略された場合、shade 引数のデフォルトはMaterial.Shade500 です。

Rectangle {
    color: Material.color(Material.Red)
}

関連情報

• スタイリングQt Quick コントロール