素材スタイル

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

付属プロパティ

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

付属メソッド

• 色color(enumeration predefined, enumeration shade)

詳しい説明

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

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

カスタマイズ

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

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

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

• 標高
• roundedScale
• コンテナスタイル

次の例では、ウィンドウと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 Controls 設定ファイル」を参照してください。

環境変数

サポートされている環境変数の完全なリストについては、 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 で追加されました。

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

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

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

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

関連情報

• スタイリングQt Quick Controls