Qt Quick Beispiele – Zeiger-Handler

Qt Quick Controls enthält vorgefertigte Komponenten, die für viele Arten von Benutzeroberflächen ausreichen; manchmal kann es jedoch vorkommen, dass Sie solche Komponenten „von Grund auf“ neu schreiben müssen. In diesem Fall müssen Sie in großem Umfang auf Pointer-Handler zurückgreifen. Dies ist eine Sammlung kleiner Beispiele, die zeigen, wie sich einige gängige und weniger gängige Interaktionsmuster umsetzen lassen.

Wenn Sie das Beispiel als ausführbare Datei kompilieren, können Sie Seiten aus einem übergeordneten „ ListView “ auswählen. Die Komponenten „ TouchpointFeedbackSprite “ und „ MouseFeedbackSprite “ zeigen, wie man mit „ PointHandler “ Feedback darüber geben kann, was der Benutzer mit den Zeigegeräten macht: Diese Komponenten sind im gesamten Beispiel stets sichtbar und beeinträchtigen die Interaktion an keiner anderen Stelle. Diese Komponenten lassen sich gut wiederverwenden, falls Sie einmal ein Video oder eine Live-Demonstration einer Benutzeroberfläche erstellen müssen.

Alternativ können einige der einzelnen QML-Dateien über die Befehlszeile mit dem qml-Tool ausgeführt werden, um sich schnell in Erinnerung zu rufen, wie eine bestimmte Art von Komponente erstellt werden kann.

TapHandler

Die Seite „tap“ zeigt, wie man Touchscreen-Tippen, Langdrücken und Mausklicks mit verschiedenen Schaltflächen erkennt. Sie können auch die verschiedenen Werte für „ gesturePolicy “ ausprobieren.

Multi-Tap-Schaltflächen

Auf dieser Seite befinden sich drei benutzerdefinierte „ Button “-Komponenten mit unterschiedlichen „ gesturePolicy “-Werten: Bei einer Schaltfläche müssen Sie Ihren Finger oder die Maus während der gesamten Zeit vom Drücken bis zum Loslassen innerhalb der Schaltfläche halten; eine wird auch dann ausgeführt, wenn Sie außerhalb der Schaltfläche ziehen und dann vor dem Loslassen wieder zurück in die Schaltfläche ziehen; und eine verlässt ihren gedrückten Zustand, wenn Sie etwas über die „ system-wide drag threshold “ hinausziehen. Wenn Sie dieses Beispiel auf einem Touchscreen ausprobieren, sollten Sie in der Lage sein, mit verschiedenen Fingern gleichzeitig mit allen drei Schaltflächen zu interagieren.

Kreismenü

Diese Seite zeigt, wie man ein touchscreenfreundliches Kreismenü erstellt, das bei Aktivierung durch einen langen Druck animiert eingeblendet wird. Sie können einen Menüpunkt auswählen, indem Sie von der Mitte auf einen der Sektoren ziehen und dort loslassen. Wenn Sie außerhalb des Menüs ziehen oder in der Mitte des Menüs loslassen, wird nichts ausgewählt. Wenn Sie außerhalb des grauen Sichtbereichs ziehen, wird das Menü abgebrochen.

PointHandler

Auf der Seite „Single Point Handler“ liefert PointHandler Rückmeldungen zu einigen der Eigenschaften, die unter SinglePointHandler::point und handlerPoint::device zu finden sind. Wenn Sie das Beispiel als ausführbare Datei kompiliert haben, sehen Sie diese Rückmeldungen zeitgleich mit den Rückmeldungen der PointHandler in der Hauptdatei pointerhandlers.qml.

Die Seite „tablet canvas“ nutzt PointHandler, um verschiedene types of pointing devices eindeutig zu erkennen, sodass Sie, wenn Sie ein Zeichentablett an Ihren Computer angeschlossen haben, auf dem Canvas-Element mit verschiedenen Stiftarten zeichnen können: Stift, Airbrush oder Marker. Sie können Striche mit dem Stylus-Radierer „löschen“ (dies geschieht hier durch Übermalen mit der Hintergrundfarbe). Mehrere „ HoverHandlers “ liefern Rückmeldung darüber, welcher Typ von Stylus oder Radierer erkannt wird.

HoverHandler

Die Seite „Hover-Seitenleiste“ zeigt, wie erkannt werden kann, wenn sich der Mauszeiger gleichzeitig über einer Schaltflächenkomponente und deren Container befindet. Die Weitergabe kann durch Setzen der Eigenschaft „ HoverHandler::blocking “ deaktiviert werden. Hier können Sie alle Kombinationen von „ HoverHandler “ und „ MouseArea “ ausprobieren, um zu vergleichen, wie sie die Hover-Erkennung handhaben. Ein weiterer „ HoverHandler “ wird verwendet, um die aktuelle Mausposition in Szenenkoordinaten anzuzeigen.

Sie können außerdem überprüfen, ob der „ HoverHandler “ auf der animierten „Plattform“ immer dann als Hover erkannt wird, wenn er unter den Mauszeiger gleitet.

DragHandler

Die Seite „Joystick“ enthält lediglich ein „ DragHandler “, das ein „ Image “ zieht. Ein „ State “ mit „ AnchorChanges “ entsperrt die Anker, sodass das Ziehen möglich ist; und ein „ AnchorAnimation “ animiert die Rückkehr des Drehknopfs in die Mittelposition, wenn er losgelassen wird.

Die Seite „Fling-Animation“ veranschaulicht eine Anwendungsmöglichkeit der Eigenschaft `DragHandler::centroid::velocity`, die lediglich den Wert aus ` QEventPoint::velocity()` in QML verfügbar macht. Die in diesem Beispiel verwendete Komponente ` MomentumAnimation ` zeigt eine Möglichkeit, physikalische Phänomene (Impuls und Reibung) zu simulieren, ohne auf aufwendigere Lösungen zurückgreifen zu müssen.

PinchHandler

Die Seite „pinch“ demonstriert mehrere PinchHandler: Einige erfordern zwei Finger, andere drei, um die üblichen Skalierungs-, Rotations- und Verschiebungsvorgänge durchzuführen, wobei die Einschränkungen über die Eigenschaften „axis min“ und „axis max“ von ` PinchHandler` verwaltet werden. Eine der ` PinchHandler `-Instanzen wird verwendet, um verschiedene ` Rectangle `-Eigenschaften anstelle von Position, Skalierung und Rotation zu manipulieren. Verschiedene ` PinchHandler `-Eigenschaften sind auf unterschiedliche Weise gebunden. Sie sollten in der Lage sein, jede Instanz individuell zu bearbeiten. Einige Elemente verfügen zudem über „DragHandler“ und „TapHandler“.

Interoperabilität

Schieberegler

Die Seite „mixer“ veranschaulicht die Verwendung mehrerer Handler innerhalb eines „ ListView “-Delegaten. Sie können gleichzeitig mit mehreren „ Slider “-Komponenten interagieren und den „ ListView “ seitlich wischen.

• Ein „ DragHandler “ ermöglicht es Ihnen, das Ziehen an einer beliebigen Stelle entlang der „Spur“ zu beginnen, auf der der Schieberegler gleiten kann. Da der Standard- snapMode „ DragHandler.SnapAuto “ ist, rastet der Regler an einer Position ein, die unter der Maus oder dem Berührungspunkt zentriert ist, nachdem Sie über den „ system-wide drag threshold “ hinausgezogen haben.
• Ein „ WheelHandler “ passt die Eigenschaft „ y “ des Schiebereglers direkt an: Image.
• Ein „ BoundaryRule “ verhindert, dass entweder die „ DragHandler “ oder die „ WheelHandler “ den Regler zu weit verschieben.
• Ein „ TapHandler “ bietet eine Geste mehr als eine typische „ Slider “-Komponente: Sie können auf den Regler tippen.

Karte

Die Seite „map“ demonstriert das Ziehen, die Transformation und die Skalierung eines SVG- Images. Sie sollten in der Lage sein, einen bestimmten Ort auf der Karte heranzuzoomen; und wenn der Zoomfaktor erheblich geändert wird, wird „ Image::sourceSize “ so angepasst, dass das SVG mit einer anderen Auflösung neu gerendert wird. Vertikales Ziehen mit zwei Fingern aktiviert eine „ DragHandler “, die eine „ Rotation “-Transformation auslöst, um die Karte zu neigen.

Fake Flickable

Die Seite „Fake Flickable“ enthält den Versuch, einen Großteil der Funktionalität von Flickable mithilfe diskreter Zeiger-Handler und Animationen nachzubilden. Flickable ist eine komplexe Komponente, aber hier sehen Sie eine Möglichkeit, die einzelnen Verhaltensweisen, die sie bietet, voneinander zu trennen – für den Fall, dass Sie nur einen Teil der Funktionalität ohne die Komplexität nutzen möchten.

Außerdem gibt es eine ausziehbare „Drawer“-Komponente, die einige weitere, durch Zeiger-Handler gesteuerte Steuerelemente enthält.

Beispielprojekt auf code.qt.io