マテリアルスタイル

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

関連プロパティ

• accent: color
• background: color
• elevation: int
• 前景色: 色背景色 : 色
• 主色: 色
• theme: 列挙型
• roundedScale: 列挙型
• コンテナスタイル: 列挙型

関連メソッド

• colorcolor(列挙型 predefined, 列挙型 shade)

詳細な説明

「Material」スタイルは、GoogleのMaterial Designガイドラインに基づいています。これにより、プラットフォームやデバイスのサイズを問わず、統一されたユーザー体験を実現します。

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

カスタマイズ

Material スタイルでは、いくつかのカスタマイズ可能な属性がサポートされています。これらの属性の一部は、fonts と同様に、子要素に対してpropagate されます：

• theme
• primary
• アクセント
• foreground
• 背景

残りの属性は子要素には伝播しません：

• elevation
• roundedScale
• containerStyle

次の例では、ウィンドウと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 コントロールのサポートされている環境変数』を参照してください。

依存関係

Material スタイル固有の属性を利用するには、Material スタイルを別途インポートする必要があります。なお、Material スタイルへの参照の有無にかかわらず、同じアプリケーションコードは他のどのスタイルでも実行されます。Material スタイル固有の属性は、アプリケーションが Material スタイルで実行された場合にのみ効果を発揮します。

常に読み込まれるQMLファイルにMaterialスタイルがインポートされている場合、アプリケーションがどのスタイルで実行されても正常に動作させるためには、Materialスタイルをアプリケーションと共にデプロイする必要があります。ファイルセレクタを使用することで、スタイルへのハードな依存関係を作成することなく、スタイル固有の調整を適用することができます。

定義済みのMaterialカラー

プライマリカラーとアクセントカラーは任意のcolor に設定できますが、Materialスタイルのパレット全体と調和するように設計された、あらかじめ定義された色のいずれかを使用することをお勧めします：

利用可能な事前定義済み色：

ダークテーマが有効になっている場合、デフォルトでは、あらかじめ定義された色の異なる色合いが使用されます：

定義済みの色合い

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

関連項目： 基本スタイル、ユニバーサルスタイル

バリエーション

「Material」スタイルには、「dense」バリアントも用意されています。このバリアントでは、ボタンやデリゲートなどのコントロールの高さが低く、使用されるフォントサイズも小さくなります。マウスやキーボードによる、より正確で柔軟なユーザー操作が可能なデスクトッププラットフォームでは、「dense」バリアントの使用が推奨されます。

denseバリアントを使用するには、環境変数QT_QUICK_CONTROLS_MATERIAL_VARIANT をDense に設定するか、qtquickcontrols2.confファイルでVariant=Dense を指定します。いずれの場合も、デフォルト値はNormal です。

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

なお、上記に示されている高さは、プラットフォームごとのフォントの違いによって異なる場合があることにご注意ください。

コントロールごとの注意事項

TextArea

TextArea は、Filled とOutlined の 2 つのcontainerStyle をサポートしています。Outlined TextArea では、コントロールの最上部に浮いた状態でプレースホルダーテキストが表示されます。 このため、プレースホルダーテキストはコントロールの境界外に出る必要があり、親であるTextArea やFlickableでclip がtrue に設定されている場合、テキストが切り取られる可能性があります。これを回避するために、このような場合にはtopInset を適切な値に設定します。

Materialガイドラインに従い、プレースホルダーテキストは短く保ち、複数行にまたがらないようにしてください。

TextField

TextArea について前述したクリッピングに関する問題は、TextField でも同様に発生する可能性があります。これを回避するには、TextField がclipをtrue に設定する際、topInset を適切な値に設定します。

Materialガイドラインに従い、プレースホルダーテキストは短くし、複数行にまたがらないようにしてください。

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

このアタッチドプロパティは、テーマのアクセント色を保持します。このプロパティは、任意のウィンドウやアイテムにアタッチできます。値は子要素に伝播されます。

デフォルト値は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
}

このアタッチドプロパティは、コントロールのエレベーションを保持します。エレベーションが高いほど、影が濃くなります。このプロパティはどのコントロールにもアタッチできますが、すべてのコントロールでエレベーションが可視化されるわけではありません。この値は子要素には伝播されません。

デフォルト値はコントロールごとに異なります。

次の例では、浮き上がったカードのような外観を実現するために、ペインのelevationを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` です。

このアタッチドプロパティは、テーマがライトかダークかを保持します。このプロパティは、任意のウィンドウやアイテムにアタッチできます。値は子要素に伝播されます。

利用可能なテーマ：

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

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

Pane {
    Material.theme: Material.Dark

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

このアタッチドプロパティは、対象のコントロールで使用される角の丸みの半径を保持します。このプロパティは任意のウィンドウやアイテムにアタッチできますが、対応しているコントロールは一部に限られます。値は子要素には伝播されません。

デフォルト値はコントロールごとに異なります。

利用可能なスケール：

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

関連項目:マテリアルスタイル: 形状。

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

デフォルト値はコントロールごとに異なります。

利用可能なスタイル：

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

関連項目:マテリアルスタイル: テキストフィールドのコンテナ。

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

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

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

関連情報

• Qt Quick コントロールのスタイル設定