Dieses Kapitel enthüllt die versteckte Mechanik der Benutzereingabe in QML. Hier werden Sie entdecken, wie Maus, Tastatur und Multitouch einer einzigen Logik folgen, das Geheimnis erfahren der richtigen Wahl zwischen Signalen und Properties und aufdecken, wie typische Fallen bei Fokus und Events vermieden werden. Das Ergebnis – vorhersagbareres Interface-Verhalten und merklich weniger Bugs bereits in der Prototypenphase.
Es werden MouseArea, eigene Signale, Fokussteuerung über KeyNavigation, „rohe” Eingabe über Keys und Arbeit mit MultiPointTouchArea behandelt. In der Praxis ermöglicht dies, Handler-Code um ein Vielfaches zu reduzieren und schnellere Interface-Reaktionen zu erreichen als beim klassischen Ansatz.
Dieses Kapitel auszulassen bedeutet, weiterhin Symptome statt Ursachen zu beheben.
Das Kapitel enthält Code-Beispiele, die sofort einsatzbereit sind.
Selbsttest zum Kapitel
Warum muss dem TextInput-Element explizit eine Breite über die width-Property zugewiesen werden, selbst wenn der Text leer ist?Antwort
Richtige Antwort: Wenn TextInput keinen Text enthält, wird seine Breite 0, was einen Klick auf das Element zum Erhalt des Fokus unmöglich macht. Explizites Festlegen der Breite garantiert Interaktionsmöglichkeit auch bei leerem Feld.
Was ist der grundsätzliche Unterschied zwischen der Verwendung des clicked-Signals und der clicked-Property für einen Button?Antwort
Richtige Antwort: Ein Signal überträgt ein Event in eine Richtung und der Empfänger kann den Zustand des Senders nicht ändern; eine Property ermöglicht bidirektionale Verbindung und Wertänderungen. Der Handler für eine Property heißt onClickedChanged, für ein Signal – onClicked.
Wozu wird in MouseArea der Parameter acceptedButtons verwendet?Antwort
Richtige Antwort: Er beschränkt das Auslösen von Handlern nur auf bestimmte Maustasten (z.B. nur linke und rechte), verhindert Reaktion auf unerwünschte Events von anderen Tasten.
Was passiert, wenn hoverEnabled: true für MouseArea bei Verwendung von onEntered/onExited nicht gesetzt wird?Antwort
Richtige Antwort: Die Handler onEntered und onExited werden nicht ausgelöst, da MouseArea standardmäßig keine Cursor-Hover-Events verfolgt, sondern nur auf Klicks reagiert.
Warum sind im Button-Beispiel die Größen des BorderImage um 15 Pixel gegenüber den Textgrößen erhöht?Antwort
Richtige Antwort: Dies erstellt interne Abstände (Padding) um den Text herum und gewährleistet ein visuell attraktives Button-Erscheinungsbild, bei dem der Text nicht an den Kanten klebt.
Wann ist es sinnvoller, Signale anstelle von Properties für die Interaktion zwischen Elementen zu verwenden?Antwort
Richtige Antwort: Signale sind vorzuziehen für die Interaktion zwischen autonomen, unabhängigen Elementen, wo kein Feedback erforderlich ist. Properties eignen sich besser für die Verbindung von Elementen innerhalb eines Eltern-Containers.
Wie funktioniert der Mechanismus der automatischen Handler-Generierung für benutzerdefinierte Signale?Antwort
Richtige Antwort: Bei der Deklaration eines Signals über das signal-Schlüsselwort wird automatisch ein Handler mit dem Präfix “on” und dem Signalnamen mit Großbuchstaben erstellt (z.B. für signal mousePositionChanged wird onMousePositionChanged erstellt).
Was passiert, wenn in MultiPointTouchArea mehr TouchPoint-Elemente angegeben werden als in maximumTouchPoints festgelegt?Antwort
Richtige Antwort: Überschüssige TouchPoints werden nicht aktiviert, da maximumTouchPoints die Anzahl gleichzeitig verarbeiteter Berührungen begrenzt. Nur die ersten N Berührungen gemäß dem festgelegten Limit werden verarbeitet.
Wozu die Attached Property KeyNavigation.tab anstelle einfacher Fokusänderung im Handler Keys.onPressed verwenden?Antwort
Richtige Antwort: KeyNavigation.tab bietet eine deklarative Methode zur Navigationsbeschreibung, macht den Code lesbarer und vereinfacht die Fokussteuerung ohne die Notwendigkeit, imperative Event-Handling-Logik zu schreiben.
In welchen Fällen muss Keys.forwardTo verwendet werden und welche Elemente können dorthin übergeben werden?Antwort
Richtige Antwort: Keys.forwardTo wird verwendet, um Tastatur-Events zur weiteren Verarbeitung an andere Elemente weiterzuleiten. Es können sowohl einzelne Elemente als auch Listen von Objekten übergeben werden.
Warum wird das TouchPoint-Element mit MouseArea verglichen?Antwort
Richtige Antwort: TouchPoint ist funktional analog zu MouseArea, aber für Touch-Eingabe – jeder TouchPoint verfolgt einen separaten Berührungspunkt, ähnlich wie MouseArea eine Maus verfolgt.
Was passiert, wenn TextInput oder TextEdit beim Versuch des Benutzers, Text einzugeben, keinen Fokus erhält?Antwort
Richtige Antwort: Texteingabe funktioniert nicht, da Tastatur-Events nur vom Element mit aktivem Fokus verarbeitet werden. Der Benutzer muss zuerst mit der Maus auf das Element klicken, um Fokus zu erhalten.
Wozu wird im Multitouch-Beispiel Repeater zur Erstellung der Touch-Visualisierung verwendet?Antwort
Richtige Antwort: Repeater erstellt automatisch visuelle Elemente (Rechtecke) für jeden TouchPoint aus dem Array, erspart die Notwendigkeit, Code für jede Berührung zu duplizieren und gewährleistet Synchronisation mit modelData-Daten.
Praktische Aufgaben
Einfaches Level
Interaktive Visitenkarte mit Hover-Effekten
Erstellen Sie eine rechteckige Visitenkarte, die Ihren Namen und Beruf enthält. Beim Bewegen des Mauscursors sollte die Karte die Hintergrundfarbe ändern, und beim Klicken mit der linken Maustaste sollte die Textschriftgröße vergrößert werden. Beim Klicken mit der rechten Maustaste sollte die Schriftgröße verkleinert werden.
Hinweise: Verwenden Sie Rectangle mit verschachteltem Text. Setzen Sie in MouseArea hoverEnabled: true zum Tracking von Hover. Verwenden Sie die containsMouse-Property zum Ändern der Farbe. Überprüfen Sie im onPressed-Handler mouse.button und ändern Sie font.pixelSize des Textes über parent oder id.
Mittleres Level
Taschenrechner für einfache Operationen mit Tastatureingabe
Erstellen Sie einen einfachen Taschenrechner mit zwei TextInput-Feldern zur Zahleneingabe und Ergebnisanzeige. Der Benutzer sollte mit der Tab-Taste zwischen Feldern wechseln können. Fügen Sie Behandlung der Tasten ‘+’, ‘-‘, ‘*’, ‘/’ zur Ausführung entsprechender Operationen und Ergebnisanzeige in einem Text-Element hinzu. Beim Drücken von Enter sollte das Ergebnis ins erste Feld kopiert werden.
Hinweise: Verwenden Sie zwei TextInputs mit konfiguriertem KeyNavigation.tab. Zur Behandlung arithmetischer Tasten verwenden Sie Keys.onPressed und prüfen Sie event.key (Qt.Key_Plus usw.). Zur Konvertierung von Text in Zahlen verwenden Sie parseFloat() oder Number(). Überprüfen Sie Eingabekorrektheit. Vergessen Sie nicht, focus: true für das erste Feld zu setzen.
Schwieriges Level
Multitouch-Zeichenanwendung mit Aktionsverlauf
Erstellen Sie eine Zeichenanwendung, die bis zu 5 gleichzeitige Berührungen unterstützt. Jede Berührung sollte eine Spur als farbige Linie hinterlassen (verschiedene Farben für verschiedene Finger). Implementieren Sie einen Verlauf der letzten 10 Berührungen mit Anzeige der Koordinaten startX/startY, aktuellen x/y und Druckstärke (pressure). Fügen Sie eine Löschen-Schaltfläche mit benutzerdefiniertem Signal clearRequested und Rückgängig-Funktion für die letzte Aktion beim Drücken der Taste ‘Z’ hinzu.
Hinweise: Verwenden Sie MultiPointTouchArea mit einem TouchPoint-Array. Zum Zeichnen verwenden Sie Canvas mit der requestPaint()-Methode. Speichern Sie in onPressureChanged- oder onPositionChanged-Handlern Koordinaten in einem JavaScript-Array. Erstellen Sie für den Verlauf ein ListModel mit Delegate-Elementen. Erstellen Sie einen eigenen Button mit signal clearRequested. Zur Tastenbehandlung verwenden Sie Keys.onPressed mit Prüfung event.key == Qt.Key_Z.
💬 Treten Sie der Diskussion bei!
Haben Sie die Benutzereingabeverarbeitung in QML verstanden? Fragen zur Wahl zwischen Signalen und Properties aufgekommen?
Teilen Sie Ihre Erfahrung bei der Implementierung interaktiver Elemente, diskutieren Sie Nuancen der Fokusarbeit oder erzählen Sie von der Lösung von Multitouch-Problemen! Ihre Erfahrung kann anderen Lesern helfen, diese Konzepte schneller zu meistern.