Material Stil

Der Material Style basiert auf den Google Material Design Guidelines. Mehr...

Angehängte Eigenschaften

• accent: Farbe
• background: Farbe
• elevation: int
• foreground: Farbe
• Primär: Farbe
• Thema: Aufzählung
• roundedScale: Aufzählung
• containerStyle: Aufzählung

Angehängte Methoden

• color color(Aufzählung predefined, Aufzählung shade)

Detaillierte Beschreibung

Der Material-Stil basiert auf den Google Material Design Guidelines. Er ermöglicht ein einheitliches Erlebnis auf allen Plattformen und Gerätegrößen.

Um eine Anwendung mit dem Material-Stil auszuführen, siehe Verwenden von Stilen in Qt Quick Controls.

Anpassungen

Der Stil Material unterstützt mehrere anpassbare Attribute. Einige dieser Attribute propagate auf Kinder in der gleichen Weise wie fonts:

• Thema
• primär
• Akzent
• Vordergrund
• Hintergrund

Die übrigen Attribute werden nicht auf Kinder übertragen:

• Anhebung
• roundedScale
• containerStyle

Im folgenden Beispiel erscheinen das Fenster und alle drei Optionsfelder im dunklen Design mit einer violetten Akzentfarbe:

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")
        }
    }
}

Neben der Angabe der Attribute in QML ist es auch möglich, einige von ihnen über Umgebungsvariablen oder in einer Konfigurationsdatei festzulegen. In QML angegebene Attribute haben Vorrang vor allen anderen Methoden.

Konfigurationsdatei

Weitere Informationen zur Konfigurationsdatei finden Sie unter Qt Quick Controls Konfigurationsdatei.

Umgebungsvariablen

Eine vollständige Liste der unterstützten Umgebungsvariablen finden Sie unter Unterstützte Umgebungsvariablen in Qt Quick Controls.

Abhängigkeit

Der Stil Material muss separat importiert werden, um Zugriff auf die Attribute zu erhalten, die für den Stil Material spezifisch sind. Es ist zu beachten, dass unabhängig von den Verweisen auf den Materialstil derselbe Anwendungscode mit jedem anderen Stil ausgeführt werden kann. Materialspezifische Attribute wirken sich nur aus, wenn die Anwendung mit dem Materialstil ausgeführt wird.

Wenn der Materialstil in eine QML-Datei importiert wird, die immer geladen wird, muss der Materialstil mit der Anwendung bereitgestellt werden, damit die Anwendung unabhängig davon ausgeführt werden kann, mit welchem Stil die Anwendung ausgeführt wird. Durch die Verwendung von Datei-Selektoren können stil-spezifische Anpassungen vorgenommen werden, ohne eine feste Abhängigkeit von einem Stil zu schaffen.

Vordefinierte Materialfarben

Auch wenn Primär- und Akzentfarben beliebige color sein können, empfiehlt es sich, eine der vordefinierten Farben zu verwenden, die so konzipiert wurden, dass sie gut mit dem Rest der Materialstilpalette zusammenarbeiten:

Verfügbare vordefinierte Farben:

Wenn das dunkle Thema verwendet wird, werden standardmäßig verschiedene Schattierungen der vordefinierten Farben verwendet:

Vordefinierte Farbtöne

Für jede vordefinierte Farbe gibt es verschiedene Schattierungen, die an die Funktion Material.color() übergeben werden können:

Siehe auch Basic Style, Universal Style

Varianten

Der Stil Material unterstützt auch eine dichte Variante, bei der Steuerelemente wie Schaltflächen und Delegierte eine geringere Höhe haben und eine kleinere Schriftgröße verwenden. Es wird empfohlen, die dichte Variante auf Desktop-Plattformen zu verwenden, wo Maus und Tastatur eine präzisere und flexiblere Benutzerinteraktion ermöglichen.

Um die dichte Variante zu verwenden, setzen Sie entweder die Umgebungsvariable QT_QUICK_CONTROLS_MATERIAL_VARIANT auf Dense, oder geben Sie Variant=Dense in der Datei qtquickcontrols2.conf an. Der Standardwert ist in beiden Fällen Normal.

Die folgenden Bilder veranschaulichen die Unterschiede zwischen einigen der Steuerelemente bei Verwendung der normalen und der dichten Variante:

Beachten Sie, dass die oben gezeigten Höhen aufgrund von Unterschieden bei den Schriftarten auf verschiedenen Plattformen variieren können.

Kontrollspezifische Hinweise

TextArea

TextArea unterstützt zwei containerStyles: Filled und Outlined. Outlined TextAreas haben fließenden Platzhaltertext, der sich am oberen Rand des Steuerelements befindet. Dies erfordert, dass der Platzhaltertext über die Grenzen des Steuerelements hinausgeht, was dazu führen kann, dass er abgeschnitten wird, wenn das TextArea oder das Flickable, dem es untergeordnet ist, clip auf true setzt. Um dies zu vermeiden, wird topInset in diesen Fällen auf einen geeigneten Wert gesetzt.

Gemäß den Materialrichtlinien sollte Platzhaltertext kurz gehalten werden und nicht mehrere Zeilen in Anspruch nehmen.

TextFeld

Das gleiche Problem mit dem Beschneiden, das oben für TextArea erläutert wurde, kann auch bei TextField auftreten. Um dies zu vermeiden, wird topInset auf einen geeigneten Wert gesetzt, wenn TextField den Clip auf true setzt.

Gemäß den Materialrichtlinien sollte Platzhaltertext kurz gehalten werden und nicht mehrere Zeilen in Anspruch nehmen.

Dokumentation der angehängten Eigenschaft

Diese angehängte Eigenschaft enthält die Akzentfarbe des Themas. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an die untergeordneten Elemente weitergegeben.

Der Standardwert ist Material.Pink.

Im folgenden Beispiel wird die Akzentfarbe der hervorgehobenen Schaltfläche in Material.Orange geändert:

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

Diese angehängte Eigenschaft enthält die Hintergrundfarbe des Themas. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an die untergeordneten Elemente weitergegeben.

Der Standardwert ist themenspezifisch (hell oder dunkel).

Im folgenden Beispiel wird die Hintergrundfarbe der Schaltfläche in Material.Teal geändert:

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

Diese angehängte Eigenschaft enthält die Höhe des Steuerelements. Je höher die Höhe, desto tiefer der Schatten. Die Eigenschaft kann an jedes Steuerelement angehängt werden, aber nicht alle Steuerelemente visualisieren die Höhe. Der Wert wird nicht an untergeordnete Elemente weitergegeben.

Der Standardwert ist steuerungsspezifisch.

Im folgenden Beispiel wird die Höhe des Fensters auf 6 festgelegt, um das Aussehen einer erhöhten Karte zu erreichen:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

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

Diese angehängte Eigenschaft enthält die Vordergrundfarbe des Themas. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an die untergeordneten Elemente weitergegeben.

Der Standardwert ist themenspezifisch (hell oder dunkel).

Im folgenden Beispiel wird die Vordergrundfarbe der Schaltfläche auf Material.Pink festgelegt:

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

Diese angehängte Eigenschaft enthält die Primärfarbe des Themas. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an die untergeordneten Elemente weitergegeben.

Die Primärfarbe wird standardmäßig als Hintergrundfarbe von ToolBar verwendet.

Der Standardwert ist Material.Indigo.

Diese angehängte Eigenschaft gibt an, ob das Thema hell oder dunkel ist. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an Kinder weitergegeben.

Verfügbare Themen:

Wenn Sie das Thema auf System setzen, wird entweder das helle oder das dunkle Thema basierend auf den Farben des Systemthemas ausgewählt. Beim Auslesen des Wertes der Eigenschaft theme wird jedoch nie der Wert System, sondern das tatsächliche Thema angezeigt.

Im folgenden Beispiel ist das Thema sowohl für den Bereich als auch für die Schaltfläche auf Material.Dark eingestellt:

Pane {
    Material.theme: Material.Dark

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

Diese angehängte Eigenschaft enthält den Radius der abgerundeten Ecken, die auf dem Zielsteuerelement verwendet werden. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden, aber nur einige Steuerelemente unterstützen sie. Der Wert wird nicht an untergeordnete Elemente weitergegeben.

Der Standardwert ist steuerungsspezifisch.

Verfügbare Skalen:

Diese Eigenschaft wurde in Qt 6.5 hinzugefügt.

Siehe auch: Material Stil: Form.

Diese angehängte Eigenschaft enthält den Stil des vom Zielsteuerelement verwendeten Containers. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden, aber nur TextField und TextArea unterstützen sie standardmäßig. Der Wert wird nicht an Kinder weitergegeben.

Der Standardwert ist steuerungsspezifisch.

Verfügbare Stile:

Diese Eigenschaft wurde in Qt 6.5 hinzugefügt.

Siehe auch: Material Stil: Text Field Containers.

Dokumentation der angehängten Methode

Diese angehängte Methode gibt den effektiven Farbwert der angegebenen vordefinierten Materialfarbe in Kombination mit dem angegebenen Farbton zurück. Wenn das Argument shade weggelassen wird, ist der Standardwert Material.Shade500.

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

Verwandte Informationen

• Gestalten Qt Quick Controls