Material-Stil

Der Material-Stil basiert auf den Google Material Design-Richtlinien. Mehr...

Angeschlossene Eigenschaften

• accent: Farbe
• Hintergrund: Farbe
• Höhe: int
• Vordergrund: Farbe
• primär: Farbe
• Thema: Aufzählung
• abgerundete Skala: Aufzählung
• Container-Stil: Aufzählung

Zugehörige Methoden

• color color(Aufzählung „vordefiniert“, Aufzählung „Farbton“)

Ausführliche Beschreibung

Der Material-Stil basiert auf den Google Material Design-Richtlinien. Er ermöglicht ein einheitliches Nutzererlebnis über alle Plattformen und Gerätegrößen hinweg.

Informationen zum Ausführen einer Anwendung im Material-Stil finden Sie unter „Verwenden von Stilen“ unter Qt Quick Controls.

Anpassung

Der Material-Stil unterstützt mehrere anpassbare Attribute. Einige dieser Attribute werden propagate an untergeordnete Elemente weitergegeben, genau wie fonts:

• theme
• primary
• accent
• Vordergrund
• Hintergrund

Die übrigen Attribute werden nicht an untergeordnete Elemente weitergegeben:

• Elevation
• roundedScale
• containerStyle

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

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 davon ü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“ unter Qt Quick Controls.

Abhängigkeit

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

Wird der „Material“-Stil in eine QML-Datei importiert, die stets geladen wird, muss der „Material“-Stil zusammen mit der Anwendung bereitgestellt werden, damit die Anwendung unabhängig davon ausgeführt werden kann, mit welchem Stil sie gestartet wird. Durch die Verwendung von Dateiselektoren lassen sich stilbezogene Anpassungen vornehmen, ohne eine feste Abhängigkeit von einem bestimmten Stil zu schaffen.

Vordefinierte Material-Farben

Auch wenn Primär- und Akzentfarben beliebige „ color “ sein können, wird empfohlen, eine der vordefinierten Farben zu verwenden, die so gestaltet wurden, dass sie gut mit dem Rest der Material-Stilpalette harmonieren:

Verfügbare vordefinierte Farben:

Wenn das dunkle Design aktiviert ist, werden standardmäßig verschiedene Schattierungen der vordefinierten Farben verwendet:

Vordefinierte Farbtöne

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

Siehe auch „Basic Style“, „Universal Style“

Varianten

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

Um die „dense“-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 lautet in beiden Fällen „ Normal “.

Die folgenden Abbildungen veranschaulichen die Unterschiede zwischen einigen Steuerelementen bei Verwendung der normalen und der „dense“-Variante:

Beachten Sie, dass die oben gezeigten Höhen je nach den plattformspezifischen Unterschieden bei den Schriftarten variieren können.

Hinweise zu bestimmten Steuerelementen

TextArea

TextArea unterstützt zwei containerStyles: „ Filled “ und „ Outlined “. Bei „Outlined TextAreas“ wird der Platzhaltertext schwebend am oberen Rand des Steuerelements angezeigt. Dies erfordert, dass der Platzhaltertext über die Grenzen des Steuerelements hinausragt, was dazu führen kann, dass er abgeschnitten wird, wenn das „ TextArea “ oder das „Flickable“, zu dem es gehört, „ clip “ auf „ true “ setzt. Um dies zu vermeiden, wird in diesen Fällen „ topInset “ auf einen geeigneten Wert gesetzt.

Gemäß den Material-Richtlinien sollte Platzhaltertext kurz gehalten werden und nicht mehrere Zeilen einnehmen.

TextField

Das oben für „ TextArea “ beschriebene Problem mit dem Abschneiden kann auch bei „ TextField “ auftreten. Um dies zu vermeiden, wird „ topInset “ auf einen geeigneten Wert gesetzt, wenn „ TextField “ „clip“ auf „ true “ setzt.

Gemäß den Material-Richtlinien sollte Platzhaltertext kurz gehalten werden und nicht mehrere Zeilen einnehmen.

Dokumentation zu den angehängten Eigenschaften

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

Der Standardwert lautet „ Material.Pink “.

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

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

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

Der Standardwert ist themenspezifisch (hell oder dunkel).

Im folgenden Beispiel wird die Hintergrundfarbe der Schaltfläche auf „ 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, jedoch zeigen nicht alle Steuerelemente die Höhe an. Der Wert wird nicht an untergeordnete Elemente weitergegeben.

Der Standardwert ist steuerelementabhängig.

Im folgenden Beispiel wird die Höhe des Fensters auf „ 6 “ gesetzt, um das Aussehen einer erhabenen Karte zu erzielen:

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 Themes. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden. Der Wert wird an untergeordnete Elemente weitergegeben.

Der Standardwert ist themenspezifisch (hell oder dunkel).

Im folgenden Beispiel wird die Vordergrundfarbe der Schaltfläche auf „ Material.Pink “ gesetzt:

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

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

Die Primärfarbe wird standardmäßig als Hintergrundfarbe für „ ToolBar “ verwendet.

Der Standardwert lautet „ Material.Indigo “.

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

Verfügbare Designs:

Wenn das Design auf „ System “ gesetzt wird, wird je nach den Farben des Systemdesigns entweder das helle oder das dunkle Design ausgewählt. Beim Auslesen des Werts der Eigenschaft „theme“ ist der Wert jedoch niemals „ System “, sondern das tatsächlich verwendete Design.

Im folgenden Beispiel ist das Design sowohl für den Bereich als auch für die Schaltfläche auf „ Material.Dark “ festgelegt:

Pane {
    Material.theme: Material.Dark

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

Diese angehängte Eigenschaft enthält den Radius der abgerundeten Ecken, die für das Zielsteuerelement verwendet werden. Die Eigenschaft kann an jedes Fenster oder Element angehängt werden, wird jedoch nur von einigen Steuerelementen unterstützt. Der Wert wird nicht an untergeordnete Elemente weitergegeben.

Der Standardwert ist steuerelementabhängig.

Verfügbare Skalierungen:

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, wird jedoch standardmäßig nur von „ TextField “ und „ TextArea “ unterstützt. Der Wert wird nicht an untergeordnete Elemente weitergegeben.

Der Standardwert ist steuerelementabhängig.

Verfügbare Stile:

Diese Eigenschaft wurde in Qt 6.5 hinzugefügt.

Siehe auch: Material-Stil: Textfeld-Container.

Beigefügte Methodendokumentation

Diese angehängte Methode gibt den tatsächlichen Farbwert der angegebenen vordefinierten Materialfarbe in Kombination mit dem angegebenen Farbton zurück. Wird das Farbton-Argument weggelassen, wird standardmäßig „ Material.Shade500 “ verwendet.

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

Weiterführende Informationen

• Gestaltung Qt Quick Controls