Dieses Kapitel zeigt, warum der Model/View-Ansatz in QML ein praktischer Weg ist, um nicht mehr gegen das Interface zu kämpfen. Hier erfahren Sie: wie die Trennung von Daten und Delegate das Skalieren von Bildschirmen drastisch vereinfacht, und wie typische Lösungen professioneller Qt-Entwickler Stunden beim Refactoring sparen. Am Ende wird der Code sauberer und Änderungen sicherer.
Es werden 3 zentrale Views (ListView, GridView, PathView) und 2 Datenansätze behandelt: ListModel und JSON-Modell, plus der „Joker” für nicht-standardisierte Interfaces – VisualItemModel.
Wenn man dieses Kapitel überspringt, muss man später die QML-Architektur „nach Gefühl” zusammenbauen – und mit Zeit dafür bezahlen.
Das Kapitel enthält Code-Beispiele, die sofort einsatzbereit sind.
Selbstüberprüfung zum Kapitel
Was ist ein Modell in QML und muss es zwingend die Daten selbst enthalten?Antwort
Richtige Antwort: Ein Modell ist ein Element, das eine Schnittstelle für den Zugriff auf Daten bereitstellt. Es muss nicht zwingend die Daten selbst enthalten – es kann einfach Zugriff auf sie bieten.
Wofür ist der Delegate zuständig und warum enthält das Modell keine Informationen über die Darstellung?Antwort
Richtige Antwort: Der Delegate ist für die Darstellung jedes einzelnen Datenelements zuständig. Die Trennung von Daten und Darstellung ermöglicht es, ein Modell mit verschiedenen Visualisierungsarten zu verwenden und vereinfacht die Code-Wartung.
Warum basieren alle View-Elemente (ListView, GridView, PathView) auf dem Element Flickable?Antwort
Richtige Antwort: Das Flickable-Element bietet Scroll- und Navigationsfunktionalität für Content, die alle Views für die Arbeit mit großen Datenlisten benötigen.
Wie greift man auf Model-Properties innerhalb des Delegates bei Verwendung eines JSON-Modells zu?Antwort
Richtige Antwort: Über das modelData-Objekt (z.B.
modelData.artist, modelData.album). Bei ListModel kann direkt über den Property-Namen zugegriffen werden.Warum können in PathView Elemente endlos in beide Richtungen gescrollt werden?Antwort
Richtige Antwort: PathView zeigt Elemente in Form einer geschlossenen Linie an – wenn das Ende der Liste erreicht ist, wird automatisch vom Anfang fortgesetzt, was einen Endlos-Scroll-Effekt erzeugt.
Welche Methoden von ListModel ermöglichen dynamische Datenänderungen und wozu dient das?Antwort
Richtige Antwort: Die Methoden
append(), insert(), remove() und move(). Dies macht ListModel zu einer dynamischen Liste und ermöglicht Datenaktualisierungen ohne Neuerstellung des Modells.Was unterscheidet VisualItemModel grundsätzlich von ListModel und wann sollte es verwendet werden?Antwort
Richtige Antwort: VisualItemModel ist selbst für die Darstellung seiner Elemente verantwortlich und benötigt keinen Delegate. Es wird verwendet, wenn jedes Element individuell dargestellt werden muss.
Warum ist JSON als Model-Typ in QML praktisch und wird dafür ein spezielles Element benötigt?Antwort
Richtige Antwort: Dank der JavaScript-Integration in QML können JSON-Daten direkt ohne spezielles Element verwendet werden – es genügt, sie einer Variablen zuzuweisen und als Modell zu nutzen.
Was passiert mit der Darstellung in GridView, wenn cellWidth und cellHeight nicht angegeben werden?Antwort
Richtige Antwort: Die Elemente werden nicht korrekt in der Tabelle platziert, da GridView die Zellengröße für die automatische Befüllung des Anzeigebereichs nicht kennt.
Wie wird der 3D-Karussell-Effekt in PathView erstellt und welche Elemente werden dafür verwendet?Antwort
Richtige Antwort: Es werden PathQuad-Elemente zur Erstellung von Kreisbögen und PathAttribute zur Änderung von Transparenz und Größe der Elemente abhängig von ihrer Position auf dem Pfad verwendet.
Wozu dienen die Properties header, footer und highlight in Views?Antwort
Richtige Antwort: Zum Hinzufügen von Dekorationen: header erstellt eine Kopfzeile oben, footer eine Fußzeile unten, und highlight eine visuelle Hervorhebung des aktuell ausgewählten Elements.
Warum wird im Beispiel mit JSON-Modell der Import mit Namespace-Identifier (as CDs) verwendet?Antwort
Richtige Antwort: Um über den Namespace (CDs.jsonModel) auf die Variable jsonModel aus der JS-Datei zuzugreifen und Namenskonflikte zu vermeiden.
Wann sollte VisualItemModel anstelle von ListModel mit Delegate verwendet werden?Antwort
Richtige Antwort: Wenn jedes Element eine einzigartige Darstellung mit unterschiedlichen Farben, Größen und Layouts erfordert – z.B. beim Einfügen spezieller Elemente (Banner, Trenner) zwischen normalen Elementen.
Welche Rolle spielt die Property pathItemCount in PathView?Antwort
Richtige Antwort: Sie bestimmt die Anzahl der Elemente, die gleichzeitig auf dem Bildschirm in der geschlossenen Band-Ansicht sichtbar sein sollen.
Praktische Aufgaben
Einfaches Level
Kontaktliste mit JSON-Modell
Erstellen Sie eine Anwendung mit einer Kontaktliste unter Verwendung eines JSON-Modells. Jeder Kontakt sollte Name, Telefonnummer und E-Mail enthalten. Zeigen Sie die Daten in einer ListView mit farblicher Hervorhebung gerader und ungerader Elemente an. Fügen Sie eine einfache Überschrift “Meine Kontakte” hinzu.
Hinweise: Erstellen Sie eine JS-Datei mit einem Array von JSON-Objekten. Importieren Sie sie mit
import "file.js" as Contacts. Im Delegate verwenden Sie index % 2 zur Bestimmung der Parität. Greifen Sie auf Daten über modelData.name zu.
Mittleres Level
Bildergalerie mit GridView
Entwickeln Sie eine Bildergalerie mit GridView und ListModel. Bei Klick auf ein Thumbnail sollte das Bild vergrößert und in einem separaten Bereich über der Liste angezeigt werden. Implementieren Sie eine Highlight-Dekoration zur Hervorhebung des ausgewählten Elements. Fügen Sie die Möglichkeit hinzu, das aktuell ausgewählte Bild durch Drücken der Delete-Taste zu löschen.
Hinweise: Verwenden Sie die
currentIndex-Property zur Verfolgung des ausgewählten Elements. Für die Vergrößerungsansicht erstellen Sie ein Image mit Binding an model.get(gridView.currentIndex).source. Die remove(index)-Methode löscht das Element. Behandeln Sie das Keys.onDeletePressed-Event.
Schwieriges Level
Musik-Player mit PathView 3D-Karussell
Erstellen Sie ein Musik-Player-Interface mit einem 3D-Karussell von Album-Covern (PathView). Implementieren Sie eine flüssige Rotationsanimation des Karussells, einen Skalierungs- und Transparenz-Effekt zur Erzeugung von Tiefe. Fügen Sie ein Kontrollpanel mit Informationen zum aktuellen Track hinzu (verwenden Sie VisualItemModel für verschiedene Elementtypen: Album-Cover und Werbebanner). Integrieren Sie die Möglichkeit, neue Alben über ein dynamisches ListModel hinzuzufügen.
Hinweise: Verwenden Sie PathQuad zur Erstellung eines Bogens, PathAttribute für iconScale und iconOpacity. Erstellen Sie ein VisualItemModel, das Album- und Banner-Elemente abwechselt. Die
PathView.onPath-Property im Delegate zeigt, ob das Element sichtbar ist. Für Flüssigkeit fügen Sie preferredHighlightBegin und preferredHighlightEnd hinzu. Die Methoden append() und insert() ermöglichen dynamisches Hinzufügen von Tracks.
💬 Zur Diskussion einladen!
Haben Sie die Model/View-Architektur verstanden? Haben Sie Fragen zur Wahl zwischen ListView, GridView und PathView?
Vielleicht haben Sie Ihre eigene einzigartige Implementierung mit VisualItemModel erstellt oder eine kreative Verwendung von PathView entwickelt?
Teilen Sie Ihre Erfahrungen, stellen Sie Fragen oder helfen Sie anderen Lesern, das Pattern der Trennung von Daten und Darstellung zu meistern!