Imagine-Stil

Der „Imagine“-Stil basiert auf konfigurierbaren Bildelementen. Mehr...

Angehängte Eigenschaften

• path: string

Ausführliche Beschreibung

Der „Imagine“-Stil basiert auf Bilddateien. Der Stil enthält einen Standardsatz an Bildern, die sich jedoch leicht ändern lassen, indem ein Verzeichnis mit Bildern bereitgestellt wird, die einer vordefinierten Namenskonvention entsprechen.

Der „Imagine“-Stil mit den Standardbildern

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

Dateinamen

Die Bilddateien werden nach folgender Konvention benannt:

<control>-<element>-<states>

Die Abschnitte „ <control> “ und „ <element> “ sind obligatorisch, der Abschnitt „ <states> “ ist jedoch optional. Wenn beispielsweise eine einzelne Datei mit dem Namen „ "button-background.9.png" “ für „ Button “ bereitgestellt wird, wird diese für jeden Zustand verwendet, den „ Button “ unterstützt. Es liegt im Ermessen des Entwicklers, für welche Zustände er Bilder bereitstellt. Es wird jedoch empfohlen, nach Möglichkeit Bilder für die gängigsten Steuerelementzustände bereitzustellen, wie z. B. disabled, pressed usw. Dadurch wird sichergestellt, dass sich interaktive Steuerelemente optisch so verhalten, wie es der Endbenutzer erwartet.

Elementreferenz

Die folgende Tabelle listet auf, welche Elemente für jedes Steuerelement unterstützt werden, zusammen mit den möglichen Zuständen für dieses Element und der erwarteten Dateiendung. Ein Element ist ein Bild, das einen bestimmten visuellen Teil des Steuerelements darstellt. Beispielsweise stellt das Element „ "background" “ von „ Button “ dessen „ background “ dar.

Beispiele für Assets

Die folgende Tabelle listet Beispiele für Assets (entnommen aus den Standard-Assets des Imagine-Stils) für alle Steuerelemente auf. Die Liste ist nicht vollständig, da nicht alle Elemente Assets benötigen, kann jedoch als Leitfaden beim Erstellen eigener Assets dienen.

Die Vorlage, aus der diese Assets exportiert wurden, ist als Sketch-Projekt verfügbar.

¹ Ein 1x1-Bild mit einer Farbe, das so gestreckt wird, dass es das Steuerelement ausfüllt.

9-Patch-Bilder

Der „Imagine“-Stil verwendet 9-Patch-Bilder, um Designern die Kontrolle darüber zu geben, wie ein bestimmtes Element auf Größenänderungen reagiert. Hier ist ein Beispiel für ein 9-Patch-Bild, das die Seite „ background “ des „ Button “ darstellt, zusammen mit einer vergrößerten Version (um die 9-Patch-Linien besser erkennen zu können):

Der Bildinhalt ist 44 Pixel breit und 32 Pixel hoch. Jedes 9-Patch-Bild benötigt an jeder Seite eine 1 Pixel dicke Linie (zusammenfassend als „9-Patch-Linien“ bezeichnet), sodass die tatsächliche Größe des Bildes 46 Pixel in der Breite und 34 Pixel in der Höhe beträgt. Beachten Sie, dass die 9-Patch-Linien unabhängig von der Ziel-DPI des Bildes immer einen Pixel dick sein müssen. Beispielsweise müssen die 9-Patch-Linien für „button-background.9.png“ und „button-background@2x.9.png“ jeweils einen Pixel dick sein.

Die 9-Patch-Linien müssen schwarz sein, und die übrigen Bereiche müssen transparent oder weiß sein:

Dehnbare Bereiche

Die 9-Patch-Linien am oberen und linken Rand legen fest, welche Teile des Bildes bei einer Größenänderung gestreckt werden.

Im Folgenden finden Sie Beispiele dafür, wie das 9-Patch-Bild in verschiedenen Abmessungen auf das Eineinhalbfache seiner ursprünglichen Größe vergrößert wird:

Beachten Sie, dass die abgerundeten Ecken ihre ursprüngliche Größe beibehalten, da sie außerhalb des Bereichs der Linien liegen.

Abstandsbereiche

Die 9-Patch-Linien am rechten und unteren Rand legen fest, wie viel Platz für die „ contentItem “ des Steuerelements zur Verfügung steht. Das bedeutet, dass man sich dies auch als Steuerung der „ padding “ vorstellen kann. Ein Diagramm zur Veranschaulichung der Abstände finden Sie unter Control Layout.

Im Folgenden finden Sie weitere Beispiele für die Größenanpassung des 9-Patch-Bildes, die diesmal jedoch veranschaulichen, wie die 9-Patch-Linien für die Abstände funktionieren.

Das „ contentItem “ kann innerhalb der schraffierten Bereiche so viel Platz einnehmen, wie es benötigt. Werden die Padding-Linien weggelassen, nimmt das „ contentItem “ so viel Platz ein, wie es benötigt, ohne dabei die dehnbaren Bereiche zu überschreiten.

Eingebettete Bereiche

In manchen Fällen ist es beispielsweise erforderlich, dass ein Steuerelement einen Schlagschatten aufweist. Würden wir jedoch dem oben gezeigten Button einen Schlagschatten hinzufügen, würde dies dessen Größe beeinflussen, was sowohl für das Layout als auch für die Grenzen der Maus- bzw. Touch-Eingabe Probleme mit sich bringt.

Inset-Bereiche berücksichtigen dies, indem sie dem Steuerelement mitteilen, dass ein bestimmter Bereich des 9-Patch-Bildes außerhalb des Steuerelements liegen soll:

In der Abbildung unten stellt die gestrichelte Linie den anklickbaren Bereich der Schaltfläche sowie den Platz dar, den sie im Layout einnimmt. Der Schatten wird durch den gestreiften Bereich dahinter markiert:

Exportieren von 9-Patch-Bildern

Zur Erstellung von 9-Patch-Bildern, die für die Verwendung mit dem „Imagine“-Stil geeignet sind, können verschiedene Vektor- und Bitmap-Editoren verwendet werden. In den folgenden Abschnitten wird der Exportvorgang für die einzelnen Editoren kurz erläutert, und im letzten Abschnitt wird erklärt, wie sichergestellt werden kann, dass die exportierten Bilder 9-Patch-konform sind.

Affinity Designer

Siehe die Dokumentation zu den Exporteinstellungen von Affinity.

Adobe Illustrator

Siehe die Dokumentation zu Adobe zum Bedienfeld „Asset-Export “.

Adobe Photoshop

Siehe die Dokumentation von Adobe zum Thema „Bild-Assets aus Ebenen generieren “.

Inkscape

Mit der Inkscape-Erweiterung „9-Patch Export“ lassen sich Assets aus Inkscape exportieren.

Sketch

Siehe die Dokumentation zum Exportieren in Sketch.

Qt Quick Controls bietet außerdem ein Plugin für Sketch an, das die Stärke der 9-Patch-Linien nach dem Export der Assets automatisch korrigiert. Um diese Datei zu installieren, doppelklicken Sie darauf. Sobald Sketch bestätigt hat, dass das 9-Patch-Export-Plugin installiert wurde, verarbeitet das Plugin die Bilder automatisch beim Export.

Korrektur von 9-Patch-Linien

Beim Export von 9-Patch-Bildern in verschiedenen DPI-Varianten (@2x, @3x usw.) werden die 9-Patch-Linien in der Regel zusammen mit dem Bild vergrößert. Es gibt mehrere Möglichkeiten, dies zu beheben, doch der vielleicht einfachste Ansatz ist die Verwendung des „mogrify“-Tools von ImageMagick. Das Tool verfügt über die Funktion „ -shave “, mit der das Bild zugeschnitten werden kann, um die Dicke der 9-Patch-Linien zu verringern:

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

Normale DPI-Bilder (d. h. solche ohne das Präfix „ @Nx “) sind davon nicht betroffen, sodass der Befehl nur für Bilder ausgeführt werden muss, die für Displays mit hoher DPI-Auflösung vorgesehen sind.

Animierte Bilder

Die animierten Bildformate WebP und GIF werden vom Stil „Imagine“ unterstützt.

Anpassung

Pfad

Der „Imagine“-Stil ermöglicht die Anpassung des Pfads, der für die Auswahl der Bildressourcen verwendet wird. Der Pfad kann für jedes Fenster oder Element angegeben werden und wird automatisch an untergeordnete Elemente weitergegeben, genau wie bei „ fonts “. Im folgenden Beispiel werden das Fenster und alle drei Optionsfelder mit dunklen Bildressourcen angezeigt (Dateien, die sich unter „qrc:/themes/dark“ befinden).

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

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

Neben der Angabe des Pfads in QML ist es auch möglich, diesen über eine Umgebungsvariable oder in einer Konfigurationsdatei festzulegen. In QML angegebene Attribute haben Vorrang vor allen anderen Methoden.

Konfigurationsdatei

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

Weitere Informationen zur Konfigurationsdatei finden Sie unter „Qt Quick Controls -Konfigurationsdatei “.

Umgebungsvariablen

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

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

Palette

Der „Imagine“-Stil unterstützt die Anpassung der Palette über die Eigenschaft ` palette ` und die Datei ` qtquickcontrols2.conf`. Wie bei anderen Stilen sind die genauen „ palette roles “, die der Imagine-Stil verwendet, stilabhängig. Da jedoch der Großteil des visuellen Erscheinungsbilds von Steuerelementen (z. B. Hintergründe) über Bildressourcen verwaltet wird, wirken sich nur die Rollen aus, die typischerweise für Text verwendet werden.

Schriftart

Benutzerdefinierte Schriftarten können über die Eigenschaft „ font “ und die Konfigurationsdatei festgelegt werden.

Abhängigkeit

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

Wird der „Imagine“-Stil in eine QML-Datei importiert, die stets geladen wird, muss der „Imagine“-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.

Siehe auch „Styling“ Qt Quick Controls

Dokumentation zu angehängten Eigenschaften

Diese angehängte Eigenschaft enthält den Pfad zu den Bilddateien...

Button {
    Imagine.path: "qrc:/themes/dark"
}

Weiterführende Informationen

• Gestaltung Qt Quick Controls
• Beispiel aus der Automobilbranche