GridView QML Type

Zur Festlegung einer Rasteransicht der von einem Modell bereitgestellten Elemente. Mehr...

• Liste aller Elemente, einschließlich geerbter Elemente

Eigenschaften

• add : Transition
• addDisplaced : Transition
• cacheBuffer : int
• cellHeight : real
• cellWidth : real
• count : int
• currentIndex : int
• currentItem : Item
• delegate : Component
• delegateModelAccess : enumeration (since 6.10)
• displaced : Transition
• displayMarginBeginning : int (since QtQuick 2.3)
• displayMarginEnd : int (since QtQuick 2.3)
• effectiveLayoutDirection : enumeration
• flow : enumeration
• footer : Component
• footerItem : Item
• header : Component
• headerItem : Item
• highlight : Component
• highlightFollowsCurrentItem : bool
• highlightItem : Item
• highlightMoveDuration : int
• highlightRangeMode : enumeration
• keyNavigationEnabled : bool
• keyNavigationWraps : bool
• layoutDirection : enumeration
• model : model
• move : Transition
• moveDisplaced : Transition
• populate : Transition
• preferredHighlightBegin : real
• preferredHighlightEnd : real
• remove : Transition
• removeDisplaced : Transition
• reuseItems : bool
• snapMode : enumeration
• verticalLayoutDirection : enumeration

Zugehörige Eigenschaften

• delayRemove : bool
• isCurrentItem : bool
• view : GridView

Angehängte Signale

• add()
• pooled()
• remove()
• reused()

Methoden

• void forceLayout()
• int indexAt(real x, real y)
• Item itemAt(real x, real y)
• Item itemAtIndex(int index)
• void moveCurrentIndexDown()
• void moveCurrentIndexLeft()
• void moveCurrentIndexRight()
• void moveCurrentIndexUp()
• void positionViewAtBeginning()
• void positionViewAtEnd()
• void positionViewAtIndex(int index, PositionMode mode)

Ausführliche Beschreibung

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

Eine GridView verfügt über ein ` model`, das die anzuzeigenden Daten definiert, und ein ` delegate`, das festlegt, wie die Daten dargestellt werden sollen. Die Elemente in einer GridView werden horizontal oder vertikal angeordnet. GridViews lassen sich von Natur aus durch Wischen bedienen, da `GridView` von ` Flickable` erbt.

Anwendungsbeispiel

Das folgende Beispiel zeigt die Definition eines einfachen Listenmodells, das in einer Datei namens „ ContactModel.qml “ definiert ist:

import QtQuick

ListModel {

    ListElement {
        name: "Jim Williams"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "John Brown"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "Bill Smyth"
        portrait: "pics/portrait.png"
    }
    ListElement {
        name: "Sam Wise"
        portrait: "pics/portrait.png"
    }
}

Auf dieses Modell kann in anderen QML-Dateien als „ ContactModel “ verwiesen werden. Weitere Informationen zum Erstellen solcher wiederverwendbarer Komponenten finden Sie unter „QML-Module “.

Eine andere Komponente kann diese Modelldaten in einer „GridView“ anzeigen, wie im folgenden Beispiel, das eine „ ContactModel “-Komponente für sein Modell und eine „ Column “ (die die Elemente „ Image “ und „ Text “ enthält) für seinen Delegaten erstellt.

import QtQuick

GridView {
    width: 300; height: 200

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }
}

Die Ansicht erstellt für jedes Element im Modell einen neuen Delegaten. Beachten Sie, dass der Delegat direkt auf die Daten „ name “ und „ portrait “ des Modells zugreifen kann.

Nachfolgend wird eine verbesserte Rasteransicht gezeigt. Der Delegat wurde optisch optimiert und in eine separate „ contactDelegate “-Komponente ausgelagert.

Rectangle {
    width: 300; height: 200

    Component {
        id: contactDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight
            Column {
                anchors.fill: parent
                Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
                Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: 80; cellHeight: 80

        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

Das aktuell ausgewählte Element wird mithilfe der Eigenschaft „ highlight “ mit einem blauen „ Rectangle “ hervorgehoben, und „ focus “ ist auf „ true “ gesetzt, um die Tastaturnavigation für die Rasteransicht zu ermöglichen. Die Rasteransicht selbst ist ein Fokusbereich (weitere Details finden Sie unter „Keyboard Focus“ in Qt Quick ).

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

GridView fügt dem Stammelement des Delegaten eine Reihe von Eigenschaften hinzu, zum Beispiel „ GridView.isCurrentItem “. Im folgenden Beispiel kann das Stammelement des Delegaten direkt auf diese angefügte Eigenschaft als „ GridView.isCurrentItem “ zugreifen, während das untergeordnete „ contactInfo “-Objekt auf diese Eigenschaft als „ wrapper.GridView.isCurrentItem “ verweisen muss.

GridView {
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    Component {
        id: contactsDelegate
        Rectangle {
            id: wrapper
            width: 80
            height: 80
            color: GridView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.GridView.isCurrentItem ? "red" : "black"
            }
        }
    }

    model: ContactModel {}
    delegate: contactsDelegate
    focus: true
}

GridView-Layouts

Das Layout der Elemente in einer GridView kann über folgende Eigenschaften gesteuert werden:

• flow - Legt fest, ob Elemente von links nach rechts (als eine Reihe von Zeilen) oder von oben nach unten (als eine Reihe von Spalten) angeordnet werden. Dieser Wert kann entweder „GridView.FlowLeftToRight“ oder „GridView.FlowTopToBottom“ sein.
• layoutDirection - Steuert die horizontale Ausrichtungsrichtung: Das heißt, ob Elemente von der linken Seite der Ansicht nach rechts oder umgekehrt angeordnet werden. Dieser Wert kann entweder „Qt.LeftToRight“ oder „Qt.RightToLeft“ sein.
• verticalLayoutDirection - Steuert die vertikale Ausrichtungsrichtung: Das heißt, ob Elemente vom oberen Rand der Ansicht nach unten oder umgekehrt angeordnet werden. Dieser Wert kann entweder „GridView.TopToBottom“ oder „GridView.BottomToTop“ sein.

Standardmäßig verläuft eine GridView von links nach rechts, und Elemente werden horizontal von links nach rechts sowie vertikal von oben nach unten angeordnet.

Diese Eigenschaften lassen sich kombinieren, um eine Vielzahl von Layouts zu erzeugen, wie in der folgenden Tabelle dargestellt. Die GridViews in der ersten Zeile haben alle den Wert „ flow “ von „GridView.FlowLeftToRight“, verwenden jedoch unterschiedliche Kombinationen aus horizontaler und vertikaler Ausrichtungsrichtung (festgelegt durch „ layoutDirection “ bzw. „ verticalLayoutDirection “). Ebenso haben die GridViews in der zweiten Zeile unten alle den Wert „ flow “ von „GridView.FlowTopToBottom“, verwenden jedoch unterschiedliche Kombinationen aus horizontalen und vertikalen Layout-Richtungen, um ihre Elemente auf unterschiedliche Weise anzuordnen.

Siehe auch „QML-Datenmodelle“, „ ListView “, „ PathView “ und „Qt Quick -Beispiele – Ansichten“.

Eigenschaftsdokumentation

add : Transition

Diese Eigenschaft legt fest, welcher Übergang auf Elemente angewendet werden soll, die der Ansicht hinzugefügt werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    add: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
    }
}

Immer wenn ein Element zur obigen Ansicht hinzugefügt wird, wird es über einen Zeitraum von einer Sekunde von der Position (100,100) zu seiner endgültigen x- und y-Position innerhalb der Ansicht animiert. Der Übergang gilt nur für die neuen Elemente, die der Ansicht hinzugefügt werden; er gilt nicht für die darunter liegenden Elemente, die durch das Hinzufügen der neuen Elemente verschoben werden. Um die verschobenen Elemente zu animieren, legen Sie die Eigenschaften „ displaced “ oder „ addDisplaced “ fest.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation zu „ ViewTransition “.

Siehe auch „ addDisplaced “, „ populate “ und „ ViewTransition “.

addDisplaced : Transition

Diese Eigenschaft legt den Übergang fest, der auf Elemente innerhalb der Ansicht angewendet werden soll, die durch das Hinzufügen anderer Elemente zur Ansicht verdrängt werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Immer wenn ein Element zur obigen Ansicht hinzugefügt wird, werden alle Elemente unterhalb des neuen Elements verschoben, wodurch sie sich innerhalb der Ansicht nach unten (oder seitwärts, falls horizontal ausgerichtet) bewegen. Während dieser Verschiebung wird die Bewegung der Elemente zu ihren neuen x-, y-Positionen innerhalb der Ansicht, wie angegeben, durch einen „ NumberAnimation “-Übergang über eine Sekunde hinweg animiert. Dieser Übergang wird nicht auf das neue Element angewendet, das der Ansicht hinzugefügt wurde; um die hinzugefügten Elemente zu animieren, setzen Sie die Eigenschaft „ add “.

Wird ein Element gleichzeitig durch mehrere Arten von Operationen verschoben, ist nicht festgelegt, ob der Übergang „addDisplaced“, „ moveDisplaced “ oder „ removeDisplaced “ angewendet wird. Wenn es zudem nicht erforderlich ist, je nachdem, ob ein Element durch eine Hinzufügungs-, Verschiebungs- oder Entfernungsoperation verschoben wird, unterschiedliche Übergänge festzulegen, sollten Sie stattdessen die Eigenschaft „ displaced “ setzen.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation zu „ ViewTransition “.

Siehe auch „ displaced“ , „ add “, „ populate “ und „ ViewTransition “.

cacheBuffer : int

Diese Eigenschaft legt fest, ob Delegaten außerhalb des sichtbaren Bereichs der Ansicht beibehalten werden.

Ist dieser Wert größer als Null, kann die Ansicht so viele Delegaten instanziiert halten, wie in den angegebenen Puffer passen. Wenn beispielsweise in einer vertikalen Ansicht der Delegat 20 Pixel hoch ist, 3 Spalten vorhanden sind und „ cacheBuffer “ auf 40 gesetzt ist, können bis zu 6 Delegaten oberhalb und 6 Delegaten unterhalb des sichtbaren Bereichs erstellt bzw. beibehalten werden. Die gepufferten Delegaten werden asynchron erstellt, wodurch die Erstellung über mehrere Frames hinweg erfolgen kann und die Wahrscheinlichkeit von Frame-Übersprüngen verringert wird. Um die Darstellungsleistung zu verbessern, werden Delegaten außerhalb des sichtbaren Bereichs nicht gezeichnet.

Der Standardwert dieser Eigenschaft ist plattformabhängig, liegt jedoch in der Regel über Null. Negative Werte werden ignoriert.

Beachten Sie, dass `cacheBuffer` kein Pixelpuffer ist – er verwaltet lediglich zusätzliche instanziierte Delegates.

Der `cacheBuffer` arbeitet außerhalb der durch ` displayMarginBeginning ` oder ` displayMarginEnd` festgelegten Anzeigebereiche.

Diese Eigenschaften geben die Breite und Höhe jeder Zelle im Raster an.

Die Standardzellengröße beträgt 100x100.

count : int [read-only]

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

Die Eigenschaft „ currentIndex “ enthält den Index des aktuellen Elements, und „ currentItem “ enthält das aktuelle Element. Wenn „ currentIndex “ auf -1 gesetzt wird, wird die Hervorhebung aufgehoben und „ currentItem “ auf null gesetzt.

Wenn „ highlightFollowsCurrentItem “ gleich „ true “ ist, führt das Setzen einer dieser Eigenschaften zu einem sanften Scrollen des „ GridView “, sodass das aktuelle Element sichtbar wird.

Beachten Sie, dass die Position des aktuellen Elements möglicherweise nur ungefähr ist, bis es in der Ansicht sichtbar wird.

delegate : Component

Der Delegat stellt eine Vorlage bereit, die jedes von der Ansicht instanziierte Element definiert. Der Index wird als zugängliche Eigenschaft „ index “ bereitgestellt. Je nach Typ des Datenmodells stehen auch Eigenschaften des Modells zur Verfügung.

Die Anzahl der Objekte und Bindungen im Delegaten wirkt sich direkt auf die Flicking-Leistung der Ansicht aus. Platzieren Sie nach Möglichkeit Funktionen, die für die normale Darstellung des Delegaten nicht benötigt werden, in einem „ Loader “, der bei Bedarf zusätzliche Komponenten laden kann.

Die Elementgröße des „ GridView “ wird durch „ cellHeight “ und „ cellWidth “ bestimmt. Die Größe der Elemente wird nicht anhand der Größe des Stammelements im Delegaten angepasst.

Der Standard- stacking order von Delegate-Instanzen ist 1.

delegateModelAccess : enumeration [since 6.10]

Diese Eigenschaft legt fest, wie Delegaten auf das Modell zugreifen können.

Die Standardeinstellung ist „ DelegateModel.Qt5ReadWrite “.

Diese Eigenschaft wurde in Qt 6.10 eingeführt.

Siehe auch „Modelle und Ansichten“ unter „ Qt Quick “ #Ändern von Modelldaten.

displaced : Transition

Diese Eigenschaft enthält den generischen Übergang, der auf Elemente angewendet werden soll, die durch eine beliebige Modelloperation, die sich auf die Ansicht auswirkt, verschoben wurden.

Dies ist eine Erleichterung bei der Festlegung eines generischen Übergangs für Elemente, die durch Hinzufügen, Verschieben oder Entfernen verlagert werden, ohne dass die einzelnen Eigenschaften „ addDisplaced “, „ moveDisplaced “ und „ removeDisplaced “ angegeben werden müssen. Hier ist beispielsweise eine Ansicht, die einen „displaced“-Übergang festlegt:

GridView {
    ...
    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Wenn innerhalb der obigen Ansicht ein Element hinzugefügt, verschoben oder entfernt wird, werden die darunter liegenden Elemente verschoben, wodurch sie sich innerhalb der Ansicht nach unten (oder seitlich, falls horizontal ausgerichtet) bewegen. Während dieser Verschiebung wird die Bewegung der Elemente zu ihren neuen x-, y-Positionen innerhalb der Ansicht, wie angegeben, durch einen „ NumberAnimation “ über einen Zeitraum von einer Sekunde animiert.

Wenn eine Ansicht sowohl diesen generischen „Displaced“-Übergang als auch einen spezifischen „ addDisplaced “- („ moveDisplaced “- oder „ removeDisplaced “-Übergang festlegt, wird bei Auftreten der entsprechenden Operation der spezifischere Übergang anstelle des generischen „Displaced“-Übergangs verwendet, vorausgesetzt, der spezifischere Übergang wurde nicht deaktiviert (durch Setzen von ` enabled ` auf `false`). Wurde er tatsächlich deaktiviert, wird stattdessen der generische „Displaced“-Übergang angewendet.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation unter ViewTransition.

Siehe auch addDisplaced, moveDisplaced, removeDisplaced und ViewTransition.

Diese Eigenschaft ermöglicht es, Delegaten außerhalb der Ansichtsgeometrie anzuzeigen.

Ist dieser Wert ungleich Null, erstellt die Ansicht zusätzliche Delegaten vor dem Beginn der Ansicht oder nach deren Ende. Die Ansicht erstellt so viele Delegaten, wie in die angegebene Pixelgröße passen.

Wenn beispielsweise in einer vertikalen Ansicht der Delegat 20 Pixel hoch ist, es 3 Spalten gibt und sowohl „ displayMarginBeginning “ als auch „ displayMarginEnd “ auf 40 gesetzt sind, werden 6 Delegaten oberhalb und 6 Delegaten unterhalb erstellt und angezeigt.

Der Standardwert ist 0.

Diese Eigenschaft dient dazu, bestimmte UI-Konfigurationen zu ermöglichen, und nicht der Leistungsoptimierung. Wenn Sie aus Leistungsgründen Delegaten außerhalb der Ansichtsgeometrie erstellen möchten, sollten Sie stattdessen wahrscheinlich die Eigenschaft „ cacheBuffer “ verwenden.

Diese Eigenschaften wurden in QtQuick 2.3 eingeführt.

effectiveLayoutDirection : enumeration [read-only]

Diese Eigenschaft enthält die tatsächlich verwendete Layout-Richtung des Rasters.

Bei Verwendung der angehängten Eigenschaft „ LayoutMirroring::enabled “ für lokalisierte Layouts wird die visuelle Layoutrichtung des Rasters gespiegelt. Die Eigenschaft „ layoutDirection “ bleibt jedoch unverändert.

Siehe auch „ GridView::layoutDirection “ und „ LayoutMirroring “.

flow : enumeration

Diese Eigenschaft bestimmt den Ablauf des Rasters.

Mögliche Werte:

footer : Component

Diese Eigenschaft enthält die Komponente, die als Fußzeile verwendet werden soll.

Für jede Ansicht wird eine Instanz der Fußzeilenkomponente erstellt. Die Fußzeile wird am Ende der Ansicht, nach allen Elementen, positioniert. Der Standard- stacking order der Fußzeile lautet 1.

Siehe auch „ header “ und „ footerItem “.

footerItem : Item [read-only]

Hier wird das Fußzeilenelement gespeichert, das aus der Komponente „ footer “ erstellt wurde.

Für jede Ansicht wird eine Instanz der Fußzeilenkomponente erstellt. Die Fußzeile wird am Ende der Ansicht, nach allen Elementen, positioniert. Der Standard- stacking order der Fußzeile lautet 1.

Siehe auch „ footer “ und „ headerItem “.

header : Component

Diese Eigenschaft enthält die Komponente, die als Kopfzeile verwendet werden soll.

Für jede Ansicht wird eine Instanz der Kopfzeilenkomponente erstellt. Die Kopfzeile wird am Anfang der Ansicht vor allen Elementen positioniert. Die Standard- stacking order -Adresse der Kopfzeile lautet 1.

Siehe auch „ footer “ und „ headerItem “.

headerItem : Item [read-only]

Hier wird das aus der Komponente „ header “ erstellte Header-Element gespeichert.

Für jede Ansicht wird eine Instanz der Kopfzeilenkomponente erstellt. Die Kopfzeile wird am Anfang der Ansicht vor allen Elementen positioniert. Die Standard- stacking order der Kopfzeile lautet 1.

Siehe auch „ header “ und „ footerItem “.

highlight : Component

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

Für jede Ansicht wird eine Instanz der Hervorhebungskomponente erstellt. Die Geometrie der resultierenden Komponenteninstanz wird von der Ansicht so verwaltet, dass sie dem aktuellen Element zugeordnet bleibt, es sei denn, die Eigenschaft „ highlightFollowsCurrentItem “ ist auf „false“ gesetzt. Die Standard-Hervorhebungsposition ( stacking order ) des Hervorhebungselements ist „ 0 “.

Siehe auch „ highlightItem “ und „ highlightFollowsCurrentItem “.

highlightFollowsCurrentItem : bool

Diese Eigenschaft legt fest, ob die Markierung von der Ansicht verwaltet wird.

Ist diese Eigenschaft auf „true“ gesetzt (Standardwert), wird die Markierung sanft verschoben, um dem aktuellen Element zu folgen. Andernfalls wird die Markierung nicht von der Ansicht verschoben, und jede Bewegung muss von der Markierung selbst implementiert werden.

Hier ist eine Markierung, deren Bewegung durch ein „ SpringAnimation “-Element definiert wird:

Component {
    id: highlight
    Rectangle {
        width: view.cellWidth; height: view.cellHeight
        color: "lightsteelblue"; radius: 5
        x: view.currentItem.x
        y: view.currentItem.y
        Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
    }
}

GridView {
    id: view
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }

    highlight: highlight
    highlightFollowsCurrentItem: false
    focus: true
}

highlightItem : Item [read-only]

Hier wird das von der Komponente „ highlight “ erstellte Highlight-Element gespeichert.

Das „highlightItem“ wird von der Ansicht verwaltet, sofern „ highlightFollowsCurrentItem “ nicht auf „false“ gesetzt ist. Der Standard- stacking order des Highlight-Elements lautet „ 0 “.

Siehe auch „ highlight “ und „ highlightFollowsCurrentItem “.

highlightMoveDuration : int

Diese Eigenschaft enthält die Dauer der Bewegungsanimation des Highlight-Delegaten.

highlightFollowsCurrentItem Diese Eigenschaft muss auf „true“ gesetzt sein, damit sie wirksam wird.

Der Standardwert für die Dauer beträgt 150 ms.

Siehe auch highlightFollowsCurrentItem.

Diese Eigenschaften legen den bevorzugten Bereich für die Hervorhebung (des aktuellen Elements) innerhalb der Ansicht fest. Der Wert „ preferredHighlightBegin “ muss kleiner sein als der Wert „ preferredHighlightEnd “.

Diese Eigenschaften beeinflussen die Position des aktuellen Elements beim Scrollen der Ansicht. Wenn beispielsweise das aktuell ausgewählte Element beim Scrollen in der Mitte der Ansicht bleiben soll, setzen Sie die Werte für „ preferredHighlightBegin “ und „ preferredHighlightEnd “ auf die oberen und unteren Koordinaten der Position, an der sich das mittlere Element befinden würde. Wird die „ currentItem “ programmgesteuert geändert, scrollt die Ansicht automatisch so, dass sich das aktuelle Element in der Mitte der Ansicht befindet. Darüber hinaus tritt das Verhalten des aktuellen Elementindex unabhängig davon auf, ob eine Hervorhebung vorhanden ist oder nicht.

Gültige Werte für „ highlightRangeMode “ sind:

keyNavigationEnabled : bool

Diese Eigenschaft gibt an, ob die Tastaturnavigation im Raster aktiviert ist.

Ist der Wert „ true “, kann der Benutzer mit der Tastatur durch die Ansicht navigieren. Dies ist nützlich für Anwendungen, bei denen die Interaktion mit Maus und Tastatur selektiv aktiviert oder deaktiviert werden muss.

Standardmäßig ist der Wert dieser Eigenschaft an „ interactive “ gebunden, um die Kompatibilität mit bestehenden Anwendungen zu gewährleisten. Wird sie explizit gesetzt, wird die Bindung an die Eigenschaft „interactive“ aufgehoben.

Siehe auch „ interactive “.

keyNavigationWraps : bool

Diese Eigenschaft legt fest, ob die Tasten-Navigation bei der Rasteranzeige umbricht

Ist dies der Fall, wird die Tasten-Navigation, die die aktuelle Elementauswahl über ein Ende der Ansicht hinausbewegen würde, stattdessen umgebrochen und die Auswahl an das andere Ende der Ansicht verschoben.

Standardmäßig erfolgt kein Umbruch bei der Tasten-Navigation.

layoutDirection : enumeration

Diese Eigenschaft legt die Ausrichtungsrichtung des Rasters fest.

Mögliche Werte:

Hinweis: Wenn „ GridView::flow “ auf „ GridView.FlowLeftToRight“ gesetzt ist, darf dies nicht mit der Einstellung „GridView::layoutDirection“ verwechselt werden, die auf „Qt.RightToLeft“ gesetzt ist. Der Flusswert „ GridView.FlowLeftToRight“ gibt lediglich an, dass der Fluss horizontal verläuft.

Siehe auch „ GridView::effectiveLayoutDirection “ und „ GridView::verticalLayoutDirection “.

model : model

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

Das Modell stellt den Datensatz bereit, der zur Erstellung der Elemente in der Ansicht verwendet wird. Modelle können direkt in QML mithilfe von „ ListModel “, „ DelegateModel “ und „ ObjectModel “ erstellt oder durch C++-Modellklassen bereitgestellt werden. Wenn eine C++-Modellklasse verwendet wird, muss es sich um eine Unterklasse von „ QAbstractItemModel “ oder um eine einfache Liste handeln.

Siehe auch Datenmodelle.

move : Transition

Diese Eigenschaft enthält den Übergang, der auf Elemente in der Ansicht angewendet werden soll, die aufgrund einer Verschiebungsoperation im „ model “ der Ansicht verschoben werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Immer wenn der „ model “ eine Verschiebungsoperation durchführt, um eine bestimmte Gruppe von Indizes zu verschieben, werden die entsprechenden Elemente in der Ansicht über einen Zeitraum von einer Sekunde an ihre neuen Positionen in der Ansicht animiert. Der Übergang gilt nur für die Elemente, die Gegenstand der Verschiebungsoperation im Modell sind; er gilt nicht für darunter liegende Elemente, die durch die Verschiebungsoperation verschoben werden. Um die verschobenen Elemente zu animieren, legen Sie die Eigenschaften „ displaced “ oder „ moveDisplaced “ fest.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation unter „ ViewTransition “.

Siehe auch „ moveDisplaced “ und „ ViewTransition “.

moveDisplaced : Transition

Diese Eigenschaft legt fest, welcher Übergang auf Elemente angewendet werden soll, die durch eine Verschiebungsoperation im „ model “ der Ansicht verschoben werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    moveDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Immer wenn der „ model “ eine Verschiebungsoperation durchführt, um eine bestimmte Gruppe von Indizes zu verschieben, werden die Elemente zwischen dem Quell- und dem Zielindex der Verschiebungsoperation verschoben, wodurch sie sich innerhalb der Ansicht nach oben oder unten (bzw. seitwärts, falls horizontal ausgerichtet) bewegen. Während dieser Verschiebung wird die Bewegung der Elemente zu ihren neuen x,y-Positionen innerhalb der Ansicht durch einen „ NumberAnimation “ über eine Sekunde hinweg animiert, wie angegeben. Dieser Übergang wird nicht auf die Elemente angewendet, die tatsächlich Gegenstand der Verschiebungsoperation sind; um die verschobenen Elemente zu animieren, setzen Sie die Eigenschaft „ move “.

Wird ein Element gleichzeitig durch mehrere Arten von Operationen verschoben, ist nicht festgelegt, ob der Übergang „ addDisplaced “, „moveDisplaced“ oder „ removeDisplaced “ angewendet wird. Wenn es zudem nicht erforderlich ist, je nachdem, ob ein Element durch eine Hinzufügungs-, Verschiebungs- oder Entfernungsoperation verschoben wird, unterschiedliche Übergänge festzulegen, sollten Sie stattdessen die Eigenschaft „ displaced “ setzen.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation zu „ ViewTransition “.

Siehe auch displaced, move und ViewTransition.

populate : Transition

Diese Eigenschaft legt fest, welcher Übergang auf die Elemente angewendet werden soll, die ursprünglich für eine Ansicht erstellt wurden.

Sie gilt für alle Elemente, die in folgenden Fällen angelegt werden:

• die Ansicht zum ersten Mal erstellt wird
• sich die „ model “ der Ansicht so ändert, dass die sichtbaren Delegaten vollständig ersetzt werden
• Die Eigenschaft „ model “ der Ansicht den Wert „ reset “ annimmt, sofern das Modell eine Unterklasse von „ QAbstractItemModel “ ist

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Bei der Initialisierung der Ansicht erstellt diese alle erforderlichen Elemente und animiert sie dann über einen Zeitraum von einer Sekunde an ihre korrekten Positionen innerhalb der Ansicht.

Wenn die Ansicht später jedoch gescrollt wird, wird der „populate“-Übergang nicht ausgeführt, obwohl Delegaten instanziiert werden, sobald sie sichtbar werden. Wenn sich das Modell so ändert, dass neue Delegaten sichtbar werden, wird stattdessen der „ add “-Übergang ausgeführt. Sie sollten sich daher nicht darauf verlassen, dass der „ populate “-Übergang die Eigenschaften im Delegaten initialisiert, da er nicht für jeden Delegaten gilt. Wenn Ihre Animation den Wert „ to “ einer Eigenschaft festlegt, sollte die Eigenschaft zunächst den Wert „ to “ haben, und die Animation sollte den Wert „ from “ festlegen, falls sie animiert wird:

GridView {
    ...
    delegate: Rectangle {
        opacity: 1 // not necessary because it's the default; but don't set 0
        ...
    }
    populate: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
    }
}

Weitere Details und Beispiele zur Verwendung von View-Übergängen finden Sie in der Dokumentation unter ViewTransition.

Siehe auch add und ViewTransition.

remove : Transition

Diese Eigenschaft legt fest, welcher Übergang auf Elemente angewendet werden soll, die aus der Ansicht entfernt werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}

Immer wenn ein Element aus der obigen Ansicht entfernt wird, wird es innerhalb einer Sekunde animiert an die Position (100,100) verschoben und gleichzeitig wird seine Deckkraft auf 0 gesetzt. Der Übergang gilt nur für die Elemente, die aus der Ansicht entfernt werden; er gilt nicht für die darunter liegenden Elemente, die durch das Entfernen der Elemente verschoben werden. Um die verschobenen Elemente zu animieren, legen Sie die Eigenschaften „ displaced “ oder „ removeDisplaced “ fest.

Beachten Sie, dass das Element zum Zeitpunkt der Anwendung des Übergangs bereits aus dem Modell entfernt wurde; alle Verweise auf die Modelldaten für den entfernten Index sind nicht mehr gültig.

Wenn zudem die angehängte Eigenschaft „ delayRemove “ für ein Delegat-Element festgelegt wurde, wird der „remove“-Übergang erst angewendet, wenn „ delayRemove “ wieder den Wert „false“ annimmt.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation zu „ ViewTransition “.

Siehe auch „ removeDisplaced “ und „ ViewTransition “.

removeDisplaced : Transition

Diese Eigenschaft legt den Übergang fest, der auf Elemente in der Ansicht angewendet werden soll, die durch das Entfernen anderer Elemente in der Ansicht verschoben werden.

Hier ist beispielsweise eine Ansicht, die einen solchen Übergang festlegt:

GridView {
    ...
    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

Immer wenn ein Element aus der obigen Ansicht entfernt wird, werden alle darunter liegenden Elemente verschoben, sodass sie sich innerhalb der Ansicht nach oben (oder seitwärts, falls horizontal ausgerichtet) bewegen. Während dieser Verschiebung wird die Bewegung der Elemente zu ihren neuen x-, y-Positionen innerhalb der Ansicht, wie angegeben, durch einen „ NumberAnimation “-Übergang über eine Sekunde hinweg animiert. Dieser Übergang wird nicht auf das Element angewendet, das tatsächlich aus der Ansicht entfernt wurde; um die entfernten Elemente zu animieren, setzen Sie die Eigenschaft „ remove “.

Wird ein Element durch mehrere Arten von Operationen gleichzeitig verschoben, ist nicht festgelegt, ob der Übergang „ addDisplaced “, „ moveDisplaced “ oder „removeDisplaced“ angewendet wird. Wenn es zudem nicht erforderlich ist, je nachdem, ob ein Element durch eine Hinzufügungs-, Verschiebungs- oder Entfernungsoperation verschoben wird, unterschiedliche Übergänge festzulegen, sollten Sie stattdessen die Eigenschaft „ displaced “ setzen.

Weitere Details und Beispiele zur Verwendung von Ansichtsübergängen finden Sie in der Dokumentation zu „ ViewTransition “.

Siehe auch displaced, remove und ViewTransition.

reuseItems : bool

Mit dieser Eigenschaft können Sie Elemente wiederverwenden, die aus dem „ delegate “ instanziiert wurden. Wenn der Wert auf „ false “ gesetzt ist, werden alle derzeit im Pool befindlichen Elemente gelöscht.

Diese Eigenschaft ist standardmäßig auf „ false “ gesetzt.

Siehe auch „ Reusing items“ , „ pooled()“ und „ reused()“.

snapMode : enumeration

Diese Eigenschaft legt fest, wie sich die Ansicht nach einem Ziehen oder Wischen stabilisiert. Mögliche Werte sind:

verticalLayoutDirection : enumeration

Diese Eigenschaft legt die vertikale Ausrichtungsrichtung des Rasters fest.

Mögliche Werte:

Siehe auch GridView::layoutDirection.

Dokumentation zu angehängten Eigenschaften

GridView.delayRemove : bool [attached]

Diese angehängte Eigenschaft gibt an, ob der Delegat zerstört werden darf. Sie ist an jede Instanz des Delegaten angehängt. Der Standardwert ist „false“.

Manchmal ist es notwendig, die Löschung eines Elements so lange hinauszuzögern, bis eine Animation abgeschlossen ist. Der im folgenden Beispiel gezeigte Delegat stellt sicher, dass die Animation vollständig abgeschlossen ist, bevor das Element aus der Liste entfernt wird.

Component {
    id: delegate
    Item {
        GridView.onRemove: SequentialAnimation {
            PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
            NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
            PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
        }
    }
}

Wenn ein Übergang vom Typ „ remove “ festgelegt wurde, wird dieser erst angewendet, wenn „delayRemove“ den Wert „ false “ zurückgibt.

GridView.isCurrentItem : bool [read-only attached]

Diese angehängte Eigenschaft ist „true“, wenn dieser Delegat das aktuelle Element ist; andernfalls „false“.

Sie ist an jede Instanz des Delegaten angehängt.

GridView {
    width: 300; height: 200
    cellWidth: 80; cellHeight: 80

    Component {
        id: contactsDelegate
        Rectangle {
            id: wrapper
            width: 80
            height: 80
            color: GridView.isCurrentItem ? "black" : "red"
            Text {
                id: contactInfo
                text: name + ": " + number
                color: wrapper.GridView.isCurrentItem ? "red" : "black"
            }
        }
    }

    model: ContactModel {}
    delegate: contactsDelegate
    focus: true
}

GridView.view : GridView [read-only attached]

Diese angehängte Eigenschaft enthält die Ansicht, die diese Delegat-Instanz verwaltet.

Sie ist an jede Instanz des Delegaten sowie an die Delegaten „header“, „footer“ und „highlight“ angehängt.

Dokumentation zu angehängten Signalen

[attached] add()

Dieses angehängte Signal wird unmittelbar nach dem Hinzufügen eines Elements zur Ansicht ausgelöst.

[attached] pooled()

Dieses Signal wird ausgelöst, nachdem ein Element dem Wiederverwendungspool hinzugefügt wurde. Sie können es verwenden, um laufende Timer oder Animationen innerhalb des Elements anzuhalten oder Ressourcen freizugeben, die nicht wiederverwendet werden können.

Dieses Signal wird nur ausgelöst, wenn die Eigenschaft „ reuseItems “ auf „ true “ gesetzt ist.

Siehe auch „ Reusing items“ , „ reuseItems “ und „ reused()“.

[attached] remove()

Dieses angehängte Signal wird unmittelbar vor dem Entfernen eines Elements aus der Ansicht ausgelöst.

Wenn ein „remove“-Übergang festgelegt wurde, wird dieser angewendet, nachdem dieses Signal verarbeitet wurde, vorausgesetzt, dass „ delayRemove “ den Wert „false“ hat.

[attached] reused()

Dieses Signal wird ausgelöst, nachdem ein Element wiederverwendet wurde. Zu diesem Zeitpunkt wurde das Element aus dem Pool entnommen und in die Inhaltsansicht eingefügt, und die Modelleigenschaften wie „ index “ und „ row “ wurden aktualisiert.

Andere Eigenschaften, die nicht vom Modell bereitgestellt werden, ändern sich nicht, wenn ein Element wiederverwendet wird. Sie sollten es vermeiden, einen Zustand innerhalb eines Delegaten zu speichern; falls Sie dies dennoch tun, setzen Sie diesen Zustand beim Empfang dieses Signals manuell zurück.

Dieses Signal wird ausgelöst, wenn das Element wiederverwendet wird, nicht jedoch beim ersten Erstellen des Elements.

Dieses Signal wird nur ausgelöst, wenn die Eigenschaft „ reuseItems “ den Wert „ true “ hat.

Siehe auch „ Reusing items“ , „ reuseItems “ und „ pooled()“.

Methodendokumentation

void forceLayout()

Die Reaktion auf Änderungen am Modell erfolgt in der Regel gebündelt und findet nur einmal pro Frame statt. Das bedeutet, dass sich das zugrunde liegende Modell innerhalb von Skriptblöcken möglicherweise bereits geändert hat, die „ GridView “ jedoch noch nicht nachgezogen hat.

Diese Methode zwingt den „ GridView “, sofort auf alle ausstehenden Änderungen im Modell zu reagieren.

Hinweis: Methoden sollten erst aufgerufen werden, nachdem die Komponente ihre Ausführung abgeschlossen hat.

int indexAt(real x, real y)

Gibt den Index des sichtbaren Elements zurück, das den Punkt x, y in den Koordinaten content item enthält. Befindet sich an dem angegebenen Punkt kein Element oder ist das Element nicht sichtbar, wird -1 zurückgegeben.

Befindet sich das Element außerhalb des sichtbaren Bereichs, wird -1 zurückgegeben, unabhängig davon, ob an dieser Stelle ein Element vorhanden sein wird, wenn es durch Scrollen in den sichtbaren Bereich gelangt.

GridView {
    id: view
    MouseArea {
        anchors.fill: parent
        onClicked: (mouse) => {
            let posInGridView = Qt.point(mouse.x, mouse.y)
            let posInContentItem = mapToItem(view.contentItem, posInGridView)
            let index = view.indexAt(posInContentItem.x, posInContentItem.y)
        }
    }
}

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

Siehe auch „ itemAt “.

Item itemAt(real x, real y)

Gibt das sichtbare Element zurück, das den Punkt x, y in den Koordinaten content item enthält. Befindet sich an dem angegebenen Punkt kein Element oder ist das Element nicht sichtbar, wird null zurückgegeben.

Befindet sich das Element außerhalb des sichtbaren Bereichs, wird `null` zurückgegeben, unabhängig davon, ob an dieser Stelle ein Element vorhanden sein wird, sobald es durch Scrollen in den sichtbaren Bereich gelangt.

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

Siehe auch indexAt.

Item itemAtIndex(int index)

Gibt das Element für „ index “ zurück. Wenn für diesen Index kein Element vorhanden ist – beispielsweise, weil es noch nicht erstellt wurde oder weil es durch Schwenken aus dem sichtbaren Bereich verschwunden ist und aus dem Cache entfernt wurde –, wird „null“ zurückgegeben.

Hinweis: Diese Methode sollte erst aufgerufen werden, nachdem die Komponente fertiggestellt ist. Der zurückgegebene Wert sollte zudem nicht gespeichert werden, da er auf `null` gesetzt werden kann, sobald die Steuerung den aufrufenden Geltungsbereich verlässt, falls die Ansicht dieses Element freigibt.

void moveCurrentIndexDown()

Verschiebt den ` currentIndex ` in der Ansicht um ein Element nach unten. Der aktuelle Index springt an den Anfang, wenn ` keyNavigationWraps ` wahr ist und er sich gerade am Ende befindet. Diese Methode hat keine Auswirkung, wenn der ` count ` den Wert Null hat.

Hinweis: Methoden sollten erst aufgerufen werden, nachdem die Komponente fertiggestellt wurde.

void moveCurrentIndexLeft()

Verschiebt die „ currentIndex “ in der Ansicht um ein Element nach links. Der aktuelle Index springt an den Anfang, wenn „ keyNavigationWraps “ auf „true“ gesetzt ist und sich der Index derzeit am Ende befindet. Diese Methode hat keine Auswirkung, wenn der „ count “ den Wert Null hat.

Hinweis: Methoden sollten erst aufgerufen werden, nachdem die Komponente fertiggestellt wurde.

void moveCurrentIndexRight()

Verschiebt die „ currentIndex “ in der Ansicht um ein Element nach rechts. Der aktuelle Index springt an den Anfang, wenn „ keyNavigationWraps “ auf „true“ gesetzt ist und sich derzeit am Ende befindet. Diese Methode hat keine Auswirkung, wenn der „ count “ den Wert Null hat.

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

void moveCurrentIndexUp()

Verschiebt die „ currentIndex “ in der Ansicht um ein Element nach oben. Der aktuelle Index springt zum Anfang, wenn „ keyNavigationWraps “ wahr ist und er sich gerade am Ende befindet. Diese Methode hat keine Auswirkung, wenn der „ count “ den Wert Null hat.

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

Positioniert die Ansicht am Anfang oder am Ende, wobei etwaige Kopf- und Fußzeilen berücksichtigt werden.

Es wird nicht empfohlen, „ contentX “ oder „ contentY “ zu verwenden, um die Ansicht an einem bestimmten Index zu positionieren. Dies ist unzuverlässig, da das Entfernen von Elementen am Anfang der Liste nicht dazu führt, dass alle anderen Elemente neu positioniert werden, und da der tatsächliche Anfang der Ansicht je nach Größe der Delegaten variieren kann.

Hinweis: Methoden sollten erst aufgerufen werden, nachdem die Komponente fertiggestellt wurde. Um die Ansicht beim Start zu positionieren, sollte diese Methode von `Component.onCompleted` aufgerufen werden. Um die Ansicht beispielsweise beim Start am Ende zu positionieren:

Component.onCompleted: positionViewAtEnd()

void positionViewAtIndex(int index, PositionMode mode)

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

Wenn die Positionierung der Ansicht am Index dazu führen würde, dass am Anfang oder Ende der Ansicht Leerraum angezeigt wird, wird die Ansicht an der Grenze positioniert.

Es wird nicht empfohlen, „ contentX “ oder „ contentY “ zu verwenden, um die Ansicht an einem bestimmten Index zu positionieren. Dies ist unzuverlässig, da das Entfernen von Elementen vom Anfang der Ansicht nicht dazu führt, dass alle anderen Elemente neu positioniert werden. Der korrekte Weg, ein Element in die Ansicht zu bringen, ist „ positionViewAtIndex “.

Hinweis: Methoden sollten erst aufgerufen werden, nachdem die Komponente fertiggestellt wurde. Um die Ansicht beim Start zu positionieren, sollte diese Methode von `Component.onCompleted` aufgerufen werden. Um die Ansicht beispielsweise am Ende zu positionieren:

Component.onCompleted: positionViewAtIndex(count - 1, GridView.Beginning)