PathView QML Type

Legt die vom Modell bereitgestellten Elemente auf einen Pfad. Mehr...

Import Statement: import QtQuick
Inherits:

Item

Eigenschaften

Beigefügte Eigenschaften

Signale

Methoden

Detaillierte Beschreibung

Eine PathView zeigt Daten von Modellen an, die von eingebauten QML-Typen wie ListModel und XmlListModel erstellt wurden, oder von benutzerdefinierten Modellklassen, die in C++ definiert sind und von QAbstractListModel erben.

Die Ansicht hat eine model, die die anzuzeigenden Daten definiert, und eine delegate, die definiert, wie die Daten angezeigt werden sollen. Die delegate wird für jedes Element auf der path instanziiert. Die Elemente können durch Anklicken entlang des Pfades verschoben werden.

Zum Beispiel, wenn ein einfaches Listenmodell in einer Datei ContactModel.qml wie folgt definiert ist:

import QtQuick

ListModel {
    ListElement {
        name: "Bill Jones"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "Jane Doe"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "John Smith"
        icon: "pics/qtlogo.png"
    }
}

Diese Daten können als PathView dargestellt werden, etwa so:

import QtQuick

Rectangle {
    width: 240; height: 200

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

    PathView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

(Beachten Sie, dass das obige Beispiel PathAttribute verwendet, um die Deckkraft der Elemente zu skalieren und zu ändern, während sie sich drehen. Dieser zusätzliche Code kann in der PathAttribute Dokumentation nachgelesen werden).

PathView verarbeitet die Tastaturnavigation nicht automatisch. Das liegt daran, dass die für die Navigation zu verwendenden Tasten von der Form des Pfades abhängen. Die Navigation kann ganz einfach hinzugefügt werden, indem man focus auf true setzt und decrementCurrentIndex() oder incrementCurrentIndex() aufruft, um z. B. mit den linken und rechten Pfeiltasten zu navigieren:

PathView {
    // ...
    focus: true
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()
}

Die Pfadansicht selbst ist ein Fokusbereich (siehe Tastaturfokus in Qt Quick für weitere Details).

Delegates werden nach Bedarf instanziiert und können jederzeit zerstört werden. Der Status sollte niemals in einem Delegaten gespeichert werden.

PathView fügt eine Reihe von Eigenschaften an das Root-Element des Delegaten an, zum Beispiel PathView.isCurrentItem. Im folgenden Beispiel kann das Stammelement des Delegaten direkt auf diese angehängte Eigenschaft als PathView.isCurrentItem zugreifen, während das untergeordnete Objekt nameText auf diese Eigenschaft als wrapper.PathView.isCurrentItem verweisen muss.

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

Beachten Sie, dass Ansichten das Clipping nicht automatisch aktivieren. Wenn die Ansicht nicht durch ein anderes Element oder den Bildschirm beschnitten wird, muss clip: true gesetzt werden, damit die Elemente außerhalb der Ansicht gut beschnitten werden.

Siehe auch Path, QML-Datenmodelle, ListView, GridView, und Qt Quick Beispiele - Ansichten.

Dokumentation der Eigenschaft

highlightRangeMode : enumeration

preferredHighlightBegin : real

preferredHighlightEnd : real

Diese Eigenschaften legen den bevorzugten Bereich der Markierung (aktuelles Element) innerhalb der Ansicht fest. Die bevorzugten Werte müssen im Bereich von 0 bis 1 liegen.

Gültige Werte für highlightRangeMode sind:

KonstanteBeschreibung
PathView.NoHighlightRangeEs wird kein Bereich angewendet: Die Markierung bewegt sich frei innerhalb der Ansicht.
PathView.ApplyRangeDie Ansicht versucht, die Markierung innerhalb des Bereichs zu halten, aber die Markierung kann sich an den Enden des Pfads oder aufgrund einer Mausinteraktion außerhalb des Bereichs bewegen.
PathView.StrictlyEnforceRangeDie Markierung wird sich niemals außerhalb des Bereichs bewegen. Das bedeutet, dass sich das aktuelle Element ändert, wenn eine Tastatur- oder Mausaktion dazu führen würde, dass sich die Markierung außerhalb des Bereichs bewegt.

Der Standardwert ist PathView.StrictlyEnforceRange.

Das Definieren eines Hervorhebungsbereichs ist der richtige Weg, um zu beeinflussen, wo das aktuelle Element landet, wenn sich die Ansicht bewegt. Wenn Sie beispielsweise möchten, dass sich das aktuell ausgewählte Element in der Mitte des Pfads befindet, setzen Sie den Markierungsbereich auf 0.5,0.5 und highlightRangeMode auf PathView.StrictlyEnforceRange. Wenn der Pfad gescrollt wird, ist das aktuell ausgewählte Element das Element an dieser Position. Dies gilt auch, wenn sich das aktuell ausgewählte Element ändert - es wird innerhalb des bevorzugten Markierungsbereichs verschoben. Außerdem verhält sich der aktuelle Elementindex unabhängig davon, ob eine Markierung vorhanden ist oder nicht.

Hinweis: Für einen gültigen Bereich muss preferredHighlightEnd größer oder gleich preferredHighlightBegin sein.


cacheItemCount : int

Diese Eigenschaft gibt die maximale Anzahl der Elemente an, die außerhalb des Pfades zwischengespeichert werden sollen.

Ein PathView mit einem Modell, das 20 Elemente enthält, einer pathItemCount von 10 und einer cacheItemCount von 4 wird beispielsweise bis zu 14 Elemente erstellen, wobei 10 Elemente auf dem Pfad sichtbar und 4 Elemente unsichtbar im Cache gespeichert sind.

Die zwischengespeicherten Delegaten werden asynchron erstellt, so dass die Erstellung über mehrere Frames hinweg erfolgen kann und die Wahrscheinlichkeit des Überspringens von Frames verringert wird.

Hinweis: Die Einstellung dieser Eigenschaft ist kein Ersatz für die Erstellung effizienter Delegaten. Sie kann die Glätte des Bildlaufverhaltens auf Kosten der zusätzlichen Speichernutzung verbessern. Je weniger Objekte und Bindungen in einem Delegaten vorhanden sind, desto schneller kann eine Ansicht gescrollt werden. Es ist wichtig zu erkennen, dass das Setzen von cacheItemCount nur Probleme, die durch langsam ladende Delegaten verursacht werden, verschiebt, es ist keine Lösung für dieses Szenario.

Siehe auch pathItemCount.


count : int [read-only]

Diese Eigenschaft enthält die Anzahl der Elemente im Modell.


currentIndex : int

Diese Eigenschaft enthält den Index des aktuellen Elements.


currentItem : Item [read-only]

Diese Eigenschaft enthält das aktuelle Element in der Ansicht.


delegate : Component

Der Delegat bietet eine Vorlage, die jedes Element definiert, das von der Ansicht instanziiert wird. Der Index ist als zugängliche index Eigenschaft verfügbar. Eigenschaften des Modells sind je nach Art des Datenmodells ebenfalls verfügbar.

Die Anzahl der Objekte und Bindungen im Delegaten hat eine direkte Auswirkung auf die Flicking-Leistung der Ansicht, wenn pathItemCount angegeben ist. Wenn möglich, platzieren Sie Funktionalität, die für die normale Anzeige des Delegaten nicht benötigt wird, in einem Loader, der bei Bedarf zusätzliche Komponenten laden kann.

Beachten Sie, dass die PathView die Elemente auf der Grundlage der Größe des Stammelements im Delegaten anordnet.

Hier ist ein Beispiel-Delegat:

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

dragMargin : real

Diese Eigenschaft enthält den maximalen Abstand vom Pfad, der das Ziehen mit der Maus auslöst.

Standardmäßig kann der Pfad nur durch Klicken auf ein Element gezogen werden. Wenn dragMargin größer als Null ist, kann ein Ziehen durch Klicken innerhalb von dragMargin Pixeln des Pfades initiiert werden.


dragging : bool [read-only]

Diese Eigenschaft gibt an, ob sich die Ansicht aufgrund des Ziehens durch den Benutzer gerade bewegt.


flickDeceleration : real

Diese Eigenschaft gibt die Geschwindigkeit an, mit der ein Flick verlangsamt wird.

Der Standardwert ist 100.


flicking : bool [read-only]

Diese Eigenschaft gibt an, ob sich die Ansicht gerade bewegt, wenn der Benutzer die Ansicht anklickt.


highlight : Component

Diese Eigenschaft enthält die Komponente, die als Hervorhebung verwendet wird.

Eine Instanz der Highlight-Komponente wird für jede Ansicht erstellt. Die Geometrie der resultierenden Komponenteninstanz wird von der Ansicht so verwaltet, dass sie beim aktuellen Element bleibt.

Das folgende Beispiel zeigt, wie man eine einfache Hervorhebung erstellt. Beachten Sie die Verwendung der Eigenschaft PathView.onPath attached, um sicherzustellen, dass das Highlight ausgeblendet wird, wenn es vom Pfad weggeschoben wird.

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

Siehe auch highlightItem und highlightRangeMode.


highlightItem : Item [read-only]

highlightItem enthält das Hervorhebungselement, das aus der Komponente highlight erstellt wurde.

Siehe auch highlight.


highlightMoveDuration : int

Diese Eigenschaft enthält die Dauer der Bewegungsanimation des Hervorhebungsdelegaten.

Wenn highlightRangeMode StrictlyEnforceRange ist, bestimmt diese Eigenschaft die Geschwindigkeit, mit der sich die Elemente entlang des Pfades bewegen.

Der Standardwert für die Dauer ist 300 ms.


interactive : bool

Ein Benutzer kann eine PathView, die nicht interaktiv ist, nicht ziehen oder streichen.

Diese Eigenschaft ist nützlich, um das Streichen vorübergehend zu deaktivieren. Dies ermöglicht eine besondere Interaktion mit den Kindern von PathView.


maximumFlickVelocity : real

Diese Eigenschaft enthält die ungefähre maximale Geschwindigkeit, mit der der Benutzer die Ansicht in Pixel/Sekunde bewegen kann.

Der Standardwert ist plattformabhängig.


model : model

Diese Eigenschaft enthält das Modell, das Daten für die Ansicht bereitstellt.

Das Modell stellt eine Reihe von Daten bereit, die zur Erstellung der Elemente für die Ansicht verwendet werden. Bei großen oder dynamischen Datensätzen wird das Modell normalerweise durch ein C++-Modellobjekt bereitgestellt. Modelle können auch direkt in QML erstellt werden, indem der Typ ListModel verwendet wird.

Hinweis: Wenn Sie das Modell ändern, werden der Offset und currentIndex auf 0 zurückgesetzt.

Siehe auch Datenmodelle.


movementDirection : enumeration

Diese Eigenschaft bestimmt die Richtung, in die sich Elemente beim Setzen des aktuellen Indexes bewegen. Die möglichen Werte sind:

KonstantBeschreibung
PathView.Shortest(Standard) die Elemente bewegen sich in die Richtung, die die geringste Bewegung erfordert, also entweder Negative oder Positive.
PathView.NegativeDie Elemente bewegen sich rückwärts in Richtung ihres Ziels.
PathView.PositiveDie Objekte bewegen sich vorwärts in Richtung ihres Ziels.

Nehmen wir zum Beispiel an, dass es 5 Gegenstände im Modell gibt und currentIndex auf 0 eingestellt ist. Wenn currentIndex auf 2 eingestellt ist,

  • wird eine Positive Bewegungsrichtung in der folgenden Reihenfolge ergeben: 0, 1, 2
  • eine Negative Bewegungsrichtung führt zu der folgenden Reihenfolge: 0, 5, 4, 3, 2
  • eine Shortest Bewegungsrichtung ergibt die gleiche Reihenfolge wie bei Positive.

Hinweis: Diese Eigenschaft hat keinen Einfluss auf die Bewegung von incrementCurrentIndex() und decrementCurrentIndex().


moving : bool [read-only]

Diese Eigenschaft gibt an, ob sich die Ansicht gerade bewegt, weil der Benutzer die Ansicht zieht oder anklickt.


offset : real

Der Offset gibt an, wie weit sich die Elemente von ihrer Ausgangsposition entfernt befinden. Dies ist eine reelle Zahl, die von 0 bis zur Anzahl der Elemente im Modell reicht.


path : Path

Diese Eigenschaft enthält den Pfad, der für die Anordnung der Elemente verwendet wird. Weitere Informationen finden Sie in der Dokumentation Path.


pathItemCount : int

Diese Eigenschaft enthält die Anzahl der Elemente, die zu einem bestimmten Zeitpunkt auf dem Pfad sichtbar sind.

Wird pathItemCount auf undefiniert gesetzt, werden alle Elemente auf dem Pfad angezeigt.


snapMode : enumeration

Diese Eigenschaft bestimmt, wie sich die Elemente nach dem Ziehen oder Schieben ausrichten. Die möglichen Werte sind:

KonstantBeschreibung
PathView.NoSnap(Standard) Die Elemente bleiben an einer beliebigen Stelle des Pfades stehen.
PathView.SnapToItemDie Elemente bleiben bei einem Element stehen, das mit preferredHighlightBegin ausgerichtet ist.
PathView.SnapOneItemDie Elemente werden nicht weiter als ein Element von dem Element entfernt, das sich zum Zeitpunkt des Loslassens der Taste am nächsten zu preferredHighlightBegin befindet. Dieser Modus ist besonders nützlich, um eine Seite nach der anderen zu verschieben.

snapMode hat keine Auswirkungen auf currentIndex. Um currentIndex zu aktualisieren, wenn die Ansicht verschoben wird, setzen Sie highlightRangeMode auf PathView.StrictlyEnforceRange (Standardwert für PathView).

Siehe auch highlightRangeMode.


Dokumentation der angehängten Eigenschaft

PathView.isCurrentItem : bool [read-only]

Diese angehängte Eigenschaft ist wahr, wenn dieser Delegat das aktuelle Element ist; andernfalls falsch.

Sie wird an jede Instanz des Delegaten angehängt.

Diese Eigenschaft kann verwendet werden, um das Aussehen des aktuellen Elements anzupassen.

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

PathView.onPath : bool [read-only]

Diese angehängte Eigenschaft gibt an, ob sich das Element derzeit auf dem Pfad befindet.

Wenn ein pathItemCount gesetzt wurde, ist es möglich, dass einige Elemente instanziiert werden, aber nicht als aktuell auf dem Pfad betrachtet werden. Normalerweise würden diese Elemente z. B. auf unsichtbar gesetzt werden:

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

Sie ist mit jeder Instanz des Delegaten verbunden.


PathView.view : PathView [read-only]

Diese angehängte Eigenschaft enthält die Ansicht, die diese Delegateninstanz verwaltet.

Sie ist an jede Instanz des Delegaten angehängt.


Signal Dokumentation

dragEnded()

Dieses Signal wird ausgegeben, wenn der Benutzer das Ziehen der Ansicht beendet.

Wenn die Geschwindigkeit des Ziehens zum Zeitpunkt des Loslassens der Touch-/Maustaste ausreichend ist, wird ein Flick ausgelöst.

Hinweis: Der entsprechende Handler ist onDragEnded.


dragStarted()

Dieses Signal wird ausgegeben, wenn die Ansicht aufgrund einer Benutzerinteraktion zu ziehen beginnt.

Hinweis: Der entsprechende Handler ist onDragStarted.


flickEnded()

Dieses Signal wird ausgegeben, wenn sich die Ansicht aufgrund eines Schnipsens nicht mehr bewegt.

Hinweis: Der entsprechende Handler ist onFlickEnded.


flickStarted()

Dieses Signal wird ausgegeben, wenn die Ansicht geschoben wird. Eine Bewegung beginnt ab dem Zeitpunkt, an dem die Maus oder die Berührung losgelassen wird, während sie noch in Bewegung ist.

Hinweis: Der entsprechende Handler ist onFlickStarted.


movementEnded()

Dieses Signal wird ausgegeben, wenn sich die Ansicht aufgrund einer Benutzerinteraktion nicht mehr bewegt. Wenn ein Flick erzeugt wurde, wird dieses Signal ausgegeben, sobald der Flick aufhört. Wurde kein Flick generiert, wird dieses Signal ausgegeben, wenn der Benutzer aufhört zu ziehen, d.h. wenn die Maus oder der Touch losgelassen wird.

Hinweis: Der entsprechende Handler ist onMovementEnded.


movementStarted()

Dieses Signal wird ausgegeben, wenn sich die Ansicht aufgrund einer Benutzerinteraktion zu bewegen beginnt.

Hinweis: Der entsprechende Handler ist onMovementStarted.


Dokumentation der Methode

decrementCurrentIndex()

Verringert den aktuellen Index.

Hinweis: Die Methoden sollten erst aufgerufen werden, wenn die Component abgeschlossen ist.


incrementCurrentIndex()

Erhöht den aktuellen Index.

Hinweis: Die Methoden sollten erst aufgerufen werden, nachdem die Komponente abgeschlossen ist.


int indexAt(real x, real y)

Gibt den Index des Elements zurück, das den Punkt x enthält, y in Inhaltskoordinaten. Gibt es an dem angegebenen Punkt kein Element, wird -1 zurückgegeben.

Hinweis: Die Methoden sollten erst aufgerufen werden, wenn die Komponente abgeschlossen ist.


Item itemAt(real x, real y)

Gibt das Element zurück, das den Punkt x, y in Inhaltskoordinaten enthält. Befindet sich kein Element an dem angegebenen Punkt, wird null zurückgegeben.

Hinweis: Die Methoden sollten erst aufgerufen werden, nachdem die Komponente abgeschlossen ist.


Item itemAtIndex(int index)

Gibt das Element für index zurück. Wenn es für diesen Index kein Element gibt, z. B. weil es noch nicht erstellt wurde oder weil es aus dem sichtbaren Bereich geschwenkt und aus dem Cache entfernt wurde, wird null zurückgegeben.

Hinweis: Diese Methode sollte erst aufgerufen werden, wenn die Komponente abgeschlossen ist. Der zurückgegebene Wert sollte auch nicht gespeichert werden, da er zu null werden kann, sobald die Kontrolle den aufrufenden Bereich verlässt, wenn die Ansicht dieses Element freigibt.


positionViewAtIndex(int index, PositionMode mode)

Positioniert die Ansicht so, dass sich die index an der durch mode angegebenen Position befindet:

KonstanteBeschreibung
PathView.Beginningpositioniert das Element am Anfang des Pfades.
PathView.Centerposition item in der Mitte des Pfades.
PathView.EndPositioniere das Element am Ende des Pfades.
PathView.Containstellt sicher, dass das Element auf dem Pfad positioniert ist.
PathView.SnapPositionPositionierung des Elements bei preferredHighlightBegin. Dieser Modus ist nur gültig, wenn highlightRangeMode StrictlyEnforceRange ist oder das Einrasten über snapMode aktiviert ist.

Hinweis: Die Methoden sollten erst aufgerufen werden, wenn die Component abgeschlossen ist. Um die Ansicht beim Starten zu positionieren, sollte diese Methode von Component.onCompleted aufgerufen werden. Zum Beispiel, um die Ansicht am Ende zu positionieren:

Component.onCompleted: positionViewAtIndex(count - 1, PathView.End)

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.