GridView QML Type

Permet de spécifier une vue en grille des éléments fournis par un modèle. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• 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

Propriétés rattachées

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

Signaux attachés

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

Méthodes

• 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)

Description détaillée

Une grille de visualisation affiche des données provenant de modèles créés à partir de types QML intégrés tels que ListModel et XmlListModel, ou de classes de modèles personnalisées définies en C++ qui héritent de QAbstractListModel.

Une GridView possède un model, qui définit les données à afficher, et un delegate, qui définit la manière dont les données doivent être affichées. Les éléments d'une grille de visualisation sont disposés horizontalement ou verticalement. Les grilles de visualisation sont intrinsèquement modifiables, car GridView hérite de Flickable.

Exemple d'utilisation

L'exemple suivant montre la définition d'un modèle de liste simple défini dans un fichier appelé ContactModel.qml:

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"
    }
}

Ce modèle peut être référencé comme ContactModel dans d'autres fichiers QML. Voir Modules QML pour plus d'informations sur la création de composants réutilisables comme celui-ci.

Un autre composant peut afficher les données de ce modèle dans une grille de visualisation, comme dans l'exemple suivant, qui crée un composant ContactModel pour son modèle et un composant Column (contenant des éléments Image et Text ) pour son délégué.

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 }
    }
}

La vue créera un nouveau délégué pour chaque élément du modèle. Notez que le délégué peut accéder directement aux données name et portrait du modèle.

Une vue améliorée de la grille est présentée ci-dessous. Le délégué est visuellement amélioré et est déplacé dans un composant contactDelegate séparé.

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
    }
}

L'élément actuellement sélectionné est mis en évidence par un Rectangle bleu à l'aide de la propriété highlight, et focus est défini sur true pour permettre la navigation au clavier dans la vue de la grille. La vue de la grille elle-même est une portée de focus (voir Focus clavier dans Qt Quick pour plus de détails).

Les délégués sont instanciés en fonction des besoins et peuvent être détruits à tout moment. L'état ne doit jamais être stocké dans un délégué.

GridView attache un certain nombre de propriétés à l'élément racine du délégué, par exemple GridView.isCurrentItem. Dans l'exemple suivant, l'élément délégué racine peut accéder directement à cette propriété attachée en tant que GridView.isCurrentItem, tandis que l'objet enfant contactInfo doit se référer à cette propriété en tant que wrapper.GridView.isCurrentItem.

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
}

Disposition des grilles de vues

La disposition des éléments dans une grille de visualisation peut être contrôlée par ces propriétés :

• flow - contrôle si les éléments sont disposés de gauche à droite (comme une série de lignes) ou de haut en bas (comme une série de colonnes). Cette valeur peut être GridView.FlowLeftToRight ou GridView.FlowTopToBottom.
• layoutDirection - contrôle la direction de la disposition horizontale, c'est-à-dire si les éléments sont disposés du côté gauche de la vue vers la droite, ou vice-versa. Cette valeur peut être Qt.LeftToRight ou Qt.RightToLeft.
• verticalLayoutDirection - contrôle la direction de la disposition verticale, c'est-à-dire si les éléments sont disposés du haut de la vue vers le bas de la vue, ou vice-versa. Cette valeur peut être GridView.TopToBottom ou GridView.BottomToTop.

Par défaut, une grille de visualisation s'écoule de gauche à droite et les éléments sont disposés de gauche à droite horizontalement et de haut en bas verticalement.

Ces propriétés peuvent être combinées pour produire une variété de dispositions, comme le montre le tableau ci-dessous. Les GridViews de la première ligne ont toutes une valeur flow de GridView.FlowLeftToRight, mais utilisent différentes combinaisons de directions de disposition horizontale et verticale (spécifiées respectivement par layoutDirection et verticalLayoutDirection ). De même, les GridViews de la deuxième ligne ci-dessous ont toutes une valeur flow de GridView.FlowTopToBottom, mais utilisent différentes combinaisons de directions de mise en page horizontales et verticales pour disposer leurs éléments de différentes manières.

Voir également les modèles de données QML, ListView, PathView, et Qt Quick Exemples - Vues.

Documentation sur les propriétés

add : Transition

Cette propriété contient la transition à appliquer aux éléments qui sont ajoutés à la vue.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois qu'un élément est ajouté à la vue ci-dessus, l'élément sera animé depuis la position (100,100) jusqu'à sa position x,y finale dans la vue, en une seconde. La transition ne s'applique qu'aux nouveaux éléments ajoutés à la vue ; elle ne s'applique pas aux éléments situés en dessous qui sont déplacés par l'ajout des nouveaux éléments. Pour animer les éléments déplacés, définissez les propriétés displaced ou addDisplaced.

Pour plus de détails et d'exemples sur l'utilisation des transitions de vue, voir la documentation ViewTransition.

Voir également addDisplaced, populate, et ViewTransition.

addDisplaced : Transition

Cette propriété définit la transition à appliquer aux éléments de la vue qui sont déplacés par l'ajout d'autres éléments à la vue.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois qu'un élément est ajouté à la vue ci-dessus, tous les éléments situés sous le nouvel élément sont déplacés, ce qui les fait descendre (ou se déplacer latéralement, s'ils sont orientés horizontalement) à l'intérieur de la vue. Au fur et à mesure que ce déplacement se produit, le mouvement des éléments vers leurs nouvelles positions x,y à l'intérieur de la vue est animé par une page NumberAnimation pendant une seconde, comme spécifié. Cette transition n'est pas appliquée au nouvel élément qui a été ajouté à la vue ; pour animer les éléments ajoutés, définissez la propriété add.

Si un élément est déplacé par plusieurs types d'opérations en même temps, il n'est pas défini si la transition addDisplaced, moveDisplaced ou removeDisplaced sera appliquée. En outre, s'il n'est pas nécessaire de spécifier des transitions différentes selon qu'un élément est déplacé par une opération d'ajout, de déplacement ou de suppression, il est préférable de définir la propriété displaced.

Pour plus de détails et d'exemples sur l'utilisation des transitions d'affichage, voir la documentation ViewTransition.

Voir également displaced, add, populate, et ViewTransition.

cacheBuffer : int

Cette propriété détermine si les délégués sont conservés en dehors de la zone visible de la vue.

Si cette valeur est supérieure à zéro, la vue peut conserver autant de délégués instanciés qu'elle peut en contenir dans la mémoire tampon spécifiée. Par exemple, si dans une vue verticale, le délégué a une hauteur de 20 pixels, qu'il y a 3 colonnes et que cacheBuffer est fixé à 40, alors jusqu'à 6 délégués au-dessus et 6 délégués au-dessous de la zone visible peuvent être créés/conservés. Les délégués mis en mémoire tampon sont créés de manière asynchrone, ce qui permet de les créer sur plusieurs images et de réduire la probabilité de sauter des images. Afin d'améliorer les performances de peinture, les délégués situés en dehors de la zone visible ne sont pas peints.

La valeur par défaut de cette propriété dépend de la plateforme, mais elle est généralement supérieure à zéro. Les valeurs négatives sont ignorées.

Notez que cacheBuffer n'est pas un tampon de pixels - il ne conserve que les délégués instanciés supplémentaires.

Le cacheBuffer fonctionne en dehors des marges d'affichage spécifiées par displayMarginBeginning ou displayMarginEnd.

Ces propriétés définissent la largeur et la hauteur de chaque cellule de la grille.

La taille par défaut des cellules est de 100x100.

count : int [read-only]

Cette propriété contient le nombre d'éléments du modèle.

La propriété currentIndex contient l'index de l'élément en cours, et currentItem contient l'élément en cours. La définition de la propriété currentIndex à -1 effacera la mise en évidence et définira la propriété currentItem à null.

Si highlightFollowsCurrentItem est true, la définition de l'une ou l'autre de ces propriétés fera défiler en douceur GridView de manière à ce que l'élément en cours devienne visible.

Notez que la position de l'élément courant peut n'être qu'approximative jusqu'à ce qu'il devienne visible dans la vue.

delegate : Component

Le délégué fournit un modèle définissant chaque élément instancié par la vue. L'index est exposé en tant que propriété index accessible. Les propriétés du modèle sont également disponibles en fonction du type de modèle de données.

Le nombre d'objets et de liaisons dans le délégué a un effet direct sur les performances de visualisation de la vue. Dans la mesure du possible, placez les fonctionnalités qui ne sont pas nécessaires à l'affichage normal du délégué dans un site Loader qui peut charger des composants supplémentaires en cas de besoin.

La taille des éléments de GridView est déterminée par cellHeight et cellWidth. Les éléments ne sont pas redimensionnés en fonction de la taille de l'élément racine du délégué.

La valeur par défaut de stacking order pour les instances de délégués est 1.

delegateModelAccess : enumeration [since 6.10]

Cette propriété détermine comment les délégués peuvent accéder au modèle.

La valeur par défaut est DelegateModel.Qt5ReadWrite.

Cette propriété a été introduite dans Qt 6.10.

Voir aussi Modèles et vues dans Qt Quick#ChangingModel Data.

displaced : Transition

Cette propriété contient la transition générique à appliquer aux éléments qui ont été déplacés par une opération de modélisation affectant la vue.

Elle permet de spécifier une transition générique pour les éléments déplacés par des opérations d'ajout, de déplacement ou de suppression, sans avoir à spécifier les propriétés individuelles addDisplaced, moveDisplaced et removeDisplaced. Par exemple, voici une vue qui spécifie une transition déplacée :

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

Lorsqu'un élément est ajouté, déplacé ou supprimé dans la vue ci-dessus, les éléments situés en dessous sont déplacés, ce qui les fait descendre (ou se déplacer latéralement, s'ils sont orientés horizontalement) dans la vue. Au fur et à mesure que ce déplacement se produit, le mouvement des éléments vers leurs nouvelles positions x,y à l'intérieur de la vue est animé par une page NumberAnimation pendant une seconde, comme spécifié.

Si une vue spécifie cette transition générique déplacée ainsi qu'une transition spécifique addDisplaced, moveDisplaced ou removeDisplaced, la transition la plus spécifique sera utilisée à la place de la transition générique déplacée lorsque l'opération concernée se produira, à condition que la transition la plus spécifique n'ait pas été désactivée (en attribuant la valeur false à enabled ). Si elle a été désactivée, la transition générique déplacée est appliquée à la place.

Pour plus de détails et d'exemples sur l'utilisation des transitions de vue, voir la documentation ViewTransition.

Voir également addDisplaced, moveDisplaced, removeDisplaced, et ViewTransition.

Cette propriété permet d'afficher les délégués en dehors de la géométrie de la vue.

Si cette valeur est différente de zéro, la vue créera des délégués supplémentaires avant le début de la vue ou après la fin. La vue créera autant de délégués qu'elle peut en contenir dans la taille de pixel spécifiée.

Par exemple, si dans une vue verticale, le délégué a une hauteur de 20 pixels, qu'il y a 3 colonnes et que displayMarginBeginning et displayMarginEnd sont tous deux définis à 40, alors 6 délégués au-dessus et 6 délégués au-dessous seront créés et affichés.

La valeur par défaut est 0.

Cette propriété est destinée à permettre certaines configurations de l'interface utilisateur, et non à optimiser les performances. Si vous souhaitez créer des délégués en dehors de la géométrie de la vue pour des raisons de performances, il est préférable d'utiliser la propriété cacheBuffer.

Ces propriétés ont été introduites dans QtQuick 2.3.

effectiveLayoutDirection : enumeration [read-only]

Cette propriété indique la direction effective de la grille.

Lors de l'utilisation de la propriété jointe LayoutMirroring::enabled pour les dispositions locales, la direction de la disposition visuelle de la grille sera reflétée. Cependant, la propriété layoutDirection restera inchangée.

Voir également GridView::layoutDirection et LayoutMirroring.

flow : enumeration

Cette propriété contient le flux de la grille.

Valeurs possibles :

footer : Component

Cette propriété contient le composant à utiliser comme pied de page.

Une instance du composant de pied de page est créée pour chaque vue. Le pied de page est placé à la fin de la vue, après tous les éléments. La valeur par défaut de stacking order pour le pied de page est 1.

Voir également header et footerItem.

footerItem : Item [read-only]

Il contient l'élément de pied de page créé à partir du composant footer.

Une instance du composant footer est créée pour chaque vue. Le pied de page est placé à la fin de la vue, après tous les éléments. La valeur par défaut de stacking order pour le pied de page est 1.

Voir également footer et headerItem.

header : Component

Cette propriété contient le composant à utiliser comme en-tête.

Une instance du composant d'en-tête est créée pour chaque vue. L'en-tête est placé au début de la vue, avant tout élément. stacking order La valeur par défaut de l'en-tête est 1.

Voir également footer et headerItem.

headerItem : Item [read-only]

Il contient l'élément d'en-tête créé à partir du composant header.

Une instance du composant d'en-tête est créée pour chaque vue. L'en-tête est placé au début de la vue, avant tout autre élément. stacking order La valeur par défaut de l'en-tête est 1.

Voir également header et footerItem.

highlight : Component

Cette propriété contient le composant à utiliser pour la mise en évidence.

Une instance du composant de mise en évidence est créée pour chaque vue. La géométrie de l'instance du composant résultant sera gérée par la vue de manière à rester avec l'élément courant, sauf si la propriété highlightFollowsCurrentItem est fausse. La valeur par défaut de stacking order pour l'élément de mise en évidence est 0.

Voir également highlightItem et highlightFollowsCurrentItem.

highlightFollowsCurrentItem : bool

Cette propriété définit si la mise en évidence est gérée par la vue.

Si cette propriété vaut true (valeur par défaut), la surbrillance est déplacée en douceur pour suivre l'élément en cours. Dans le cas contraire, le surlignage n'est pas déplacé par la vue et tout mouvement doit être effectué par le surlignage.

Voici une surbrillance dont le mouvement est défini par un élément SpringAnimation:

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]

Il contient l'élément de mise en évidence créé à partir du composant highlight.

L'élément de mise en évidence est géré par la vue, sauf si la valeur de highlightFollowsCurrentItem est fixée à false. La valeur par défaut de stacking order pour l'élément de mise en évidence est 0.

Voir également highlight et highlightFollowsCurrentItem.

highlightMoveDuration : int

Cette propriété définit la durée de l'animation du déplacement du délégué à la mise en évidence.

highlightFollowsCurrentItem doit être vrai pour que cette propriété ait un effet.

La valeur par défaut de la durée est de 150 ms.

Voir aussi highlightFollowsCurrentItem.

Ces propriétés définissent l'étendue préférée de la mise en évidence (pour l'élément en cours) dans la vue. La valeur preferredHighlightBegin doit être inférieure à la valeur preferredHighlightEnd.

Ces propriétés affectent la position de l'élément courant lorsque l'affichage est déroulé. Par exemple, si l'élément sélectionné doit rester au milieu de la vue lors du défilement, définissez les valeurs preferredHighlightBegin et preferredHighlightEnd comme étant les coordonnées supérieures et inférieures de l'emplacement de l'élément central. Si la valeur currentItem est modifiée par programme, la vue défilera automatiquement de manière à ce que l'élément en cours se trouve au milieu de la vue. En outre, le comportement de l'index de l'élément courant se produira qu'il y ait ou non une mise en évidence.

Les valeurs valides pour highlightRangeMode sont les suivantes

keyNavigationEnabled : bool

Cette propriété indique si la navigation au clavier de la grille est activée.

Si cette propriété vaut true, l'utilisateur peut naviguer dans la vue à l'aide du clavier. Cette propriété est utile pour les applications qui doivent activer ou désactiver de manière sélective l'interaction avec la souris et le clavier.

Par défaut, la valeur de cette propriété est liée à interactive pour assurer la compatibilité du comportement des applications existantes. Lorsqu'elle est définie explicitement, elle cesse d'être liée à la propriété interactive.

Voir également interactive.

keyNavigationWraps : bool

Cette propriété indique si la grille enveloppe la navigation par touche

Si cette propriété est vraie, la navigation par touche qui déplacerait la sélection de l'élément actuel au-delà d'une extrémité de la vue est enveloppée et déplace la sélection jusqu'à l'autre extrémité de la vue.

Par défaut, la navigation par touches n'est pas enveloppée.

layoutDirection : enumeration

Cette propriété définit la direction de la mise en page de la grille.

Valeurs possibles :

Remarque: si GridView::flow est défini sur GridView.FlowLeftToRight, il ne faut pas confondre avec GridView::layoutDirection défini sur Qt.RightToLeft. La valeur de flux GridView.FlowLeftToRight indique simplement que le flux est horizontal.

Voir également GridView::effectiveLayoutDirection et GridView::verticalLayoutDirection.

model : model

Cette propriété contient le modèle qui fournit les données de la grille.

Le modèle fournit l'ensemble des données utilisées pour créer les éléments de la vue. Les modèles peuvent être créés directement en QML à l'aide de ListModel, DelegateModel, ObjectModel, ou fournis par des classes de modèles C++. Si une classe de modèle C++ est utilisée, elle doit être une sous-classe de QAbstractItemModel ou une simple liste.

Voir aussi Modèles de données.

move : Transition

Cette propriété définit la transition à appliquer aux éléments de la vue qui sont déplacés à la suite d'une opération de déplacement dans la vue model.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois que model effectue une opération de déplacement d'un ensemble particulier d'index, les éléments respectifs de la vue seront animés jusqu'à leur nouvelle position dans la vue en l'espace d'une seconde. La transition ne s'applique qu'aux éléments qui font l'objet de l'opération de déplacement dans le modèle ; elle ne s'applique pas aux éléments situés en dessous qui sont déplacés par l'opération de déplacement. Pour animer les éléments déplacés, définissez les propriétés displaced ou moveDisplaced.

Pour plus de détails et d'exemples sur l'utilisation des transitions de vue, voir la documentation ViewTransition.

Voir également moveDisplaced et ViewTransition.

moveDisplaced : Transition

Cette propriété définit la transition à appliquer aux éléments déplacés par une opération de déplacement dans la vue model.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois que model effectue une opération de déplacement d'un ensemble particulier d'index, les éléments situés entre les index source et destination de l'opération de déplacement sont déplacés, ce qui entraîne leur déplacement vers le haut ou vers le bas (ou latéralement, s'ils sont orientés horizontalement) à l'intérieur de la vue. Au fur et à mesure que ce déplacement se produit, le mouvement des éléments vers leurs nouvelles positions x,y à l'intérieur de la vue est animé par une page NumberAnimation pendant une seconde, comme spécifié. Cette transition n'est pas appliquée aux éléments qui sont les sujets réels de l'opération de déplacement ; pour animer les éléments déplacés, définissez la propriété move.

Si un élément est déplacé par plusieurs types d'opérations en même temps, il n'est pas défini si la transition addDisplaced, moveDisplaced ou removeDisplaced sera appliquée. En outre, s'il n'est pas nécessaire de spécifier des transitions différentes selon qu'un élément est déplacé par une opération d'ajout, de déplacement ou de suppression, envisagez plutôt de définir la propriété displaced.

Pour plus de détails et d'exemples sur l'utilisation des transitions d'affichage, voir la documentation ViewTransition.

Voir également displaced, move, et ViewTransition.

populate : Transition

Cette propriété contient la transition à appliquer aux éléments créés initialement pour une vue.

Elle s'applique à tous les éléments créés lorsque :

• la vue est créée pour la première fois
• Le site model de la vue change de manière à ce que les délégués visibles soient complètement remplacés.
• La vue model est reset, si le modèle est une sous-classe de QAbstractItemModel.

Par exemple, voici une vue qui spécifie une telle transition :

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

Lorsque la vue est initialisée, elle crée tous les éléments nécessaires à la vue, puis les anime à leur position correcte dans la vue pendant une seconde.

Cependant, lorsque l'on fait défiler la vue par la suite, la transition de remplissage ne s'exécute pas, même si les délégués sont instanciés au fur et à mesure qu'ils deviennent visibles. Lorsque le modèle change de manière à ce que de nouveaux délégués deviennent visibles, c'est la transition add qui s'exécute. Vous ne devez donc pas dépendre de la transition populate pour initialiser les propriétés du délégué, car elle ne s'applique pas à tous les délégués. Si votre animation définit la valeur to d'une propriété, la propriété doit initialement avoir la valeur to, et l'animation doit définir la valeur from au cas où elle serait animée :

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 }
    }
}

Pour plus de détails et d'exemples sur l'utilisation des transitions de vue, voir la documentation ViewTransition.

Voir également add et ViewTransition.

remove : Transition

Cette propriété contient la transition à appliquer aux éléments qui sont retirés de la vue.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois qu'un élément est retiré de la vue ci-dessus, l'élément sera animé jusqu'à la position (100,100) pendant une seconde et, parallèlement, son opacité passera à 0. La transition ne s'applique qu'aux éléments qui sont retirés de la vue ; elle ne s'applique pas aux éléments situés en dessous d'eux qui sont déplacés par le retrait des éléments. Pour animer les éléments déplacés, définissez les propriétés displaced ou removeDisplaced.

Notez qu'au moment où la transition est appliquée, l'élément a déjà été supprimé du modèle ; toute référence aux données du modèle pour l'index supprimé ne sera pas valide.

En outre, si la propriété delayRemove attached a été définie pour un élément délégué, la transition de suppression ne sera pas appliquée tant que delayRemove ne sera pas redevenu faux.

Pour plus de détails et d'exemples sur l'utilisation des transitions de vue, voir la documentation ViewTransition.

Voir également removeDisplaced et ViewTransition.

removeDisplaced : Transition

Cette propriété définit la transition à appliquer aux éléments de la vue qui sont déplacés par la suppression d'autres éléments de la vue.

Par exemple, voici une vue qui spécifie une telle transition :

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

Chaque fois qu'un élément est retiré de la vue ci-dessus, tous les éléments situés en dessous sont déplacés, ce qui entraîne leur déplacement vers le haut (ou vers les côtés, s'ils sont orientés horizontalement) à l'intérieur de la vue. Au fur et à mesure que ce déplacement se produit, le mouvement des éléments vers leurs nouvelles positions x,y à l'intérieur de la vue sera animé par une animation NumberAnimation sur une seconde, comme spécifié. Cette transition n'est pas appliquée à l'élément qui a été retiré de la vue ; pour animer les éléments retirés, définissez la propriété remove.

Si un élément est déplacé par plusieurs types d'opérations en même temps, il n'est pas défini si la transition addDisplaced, moveDisplaced ou removeDisplaced sera appliquée. En outre, s'il n'est pas nécessaire de spécifier des transitions différentes selon qu'un élément est déplacé par une opération d'ajout, de déplacement ou de suppression, envisagez plutôt de définir la propriété displaced.

Pour plus de détails et d'exemples sur l'utilisation des transitions d'affichage, voir la documentation ViewTransition.

Voir également displaced, remove, et ViewTransition.

reuseItems : bool

Cette propriété vous permet de réutiliser les éléments qui sont instanciés à partir de delegate. Si elle est définie à false, tous les éléments actuellement mis en commun sont détruits.

Cette propriété vaut false par défaut.

Voir également Reusing items, pooled() et reused().

snapMode : enumeration

Cette propriété détermine la manière dont le défilement de la vue se stabilisera après un glissement ou une pichenette. Les valeurs possibles sont les suivantes

verticalLayoutDirection : enumeration

Cette propriété définit la direction verticale de la grille.

Valeurs possibles :

Voir également GridView::layoutDirection.

Documentation sur les propriétés attachées

GridView.delayRemove : bool

Cette propriété jointe indique si le délégué peut être détruit. Elle est attachée à chaque instance du délégué. La valeur par défaut est false.

Il est parfois nécessaire de retarder la destruction d'un élément jusqu'à la fin d'une animation. L'exemple de délégué ci-dessous garantit que l'animation se termine avant que l'élément ne soit supprimé de la liste.

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 }
        }
    }
}

Si une transition remove a été spécifiée, elle ne sera pas appliquée tant que delayRemove n'aura pas été ramené à false.

GridView.isCurrentItem : bool [read-only]

Cette propriété attachée est vraie si ce délégué est l'élément courant, sinon elle est fausse.

Elle est attachée à chaque instance du délégué.

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]

Cette propriété jointe contient la vue qui gère cette instance de délégué.

Elle est attachée à chaque instance du délégué ainsi qu'à l'en-tête, au pied de page et aux délégués de mise en évidence.

Documentation sur le signal attaché

add()

Ce signal attaché est émis immédiatement après l'ajout d'un élément à la vue.

pooled()

Ce signal est émis après qu'un élément a été ajouté au pool de réutilisation. Vous pouvez l'utiliser pour mettre en pause les minuteries ou les animations en cours à l'intérieur de l'élément, ou pour libérer les ressources qui ne peuvent pas être réutilisées.

Ce signal n'est émis que si la propriété reuseItems est true.

Voir également Reusing items, reuseItems, et reused().

remove()

Ce signal attaché est émis immédiatement avant qu'un élément ne soit retiré de la vue.

Si une transition de suppression a été spécifiée, elle est appliquée après le traitement de ce signal, à condition que delayRemove soit faux.

reused()

Ce signal est émis après la réutilisation d'un élément. À ce stade, l'élément a été retiré du pool et placé dans la vue de contenu, et les propriétés du modèle telles que index et row ont été mises à jour.

Les autres propriétés qui ne sont pas fournies par le modèle ne changent pas lorsqu'un élément est réutilisé. Vous devez éviter de stocker un état dans un délégué, mais si vous le faites, réinitialisez manuellement cet état à la réception de ce signal.

Ce signal est émis lorsque l'élément est réutilisé, et non lors de sa première création.

Ce signal n'est émis que si la propriété reuseItems est true.

Voir aussi Reusing items, reuseItems, et pooled().

Documentation de la méthode

void forceLayout()

La réponse aux modifications du modèle est généralement mise en lot pour ne se produire qu'une fois par image. Cela signifie qu'à l'intérieur des blocs de script, il est possible que le modèle sous-jacent ait changé, mais que l'adresse GridView ne l'ait pas encore rattrapé.

Cette méthode oblige le site GridView à répondre immédiatement à tout changement en cours dans le modèle.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

int indexAt(real x, real y)

Renvoie l'indice de l'élément visible contenant le point x, y en coordonnées content item. S'il n'y a pas d'élément au point spécifié, ou si l'élément n'est pas visible, -1 est renvoyé.

Si l'élément se trouve en dehors de la zone visible, -1 est renvoyé, qu'il y ait ou non un élément à cet endroit lorsqu'il est affiché par défilement.

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)
        }
    }
}

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

Voir également itemAt.

Item itemAt(real x, real y)

Renvoie l'élément visible contenant le point x, y en coordonnées content item. S'il n'y a pas d'élément au point spécifié, ou si l'élément n'est pas visible, null est renvoyé.

Si l'élément se trouve en dehors de la zone visible, null est renvoyé, même si un élément existe à cet endroit lorsqu'on le fait défiler.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

Voir également indexAt.

Item itemAtIndex(int index)

Renvoie l'élément correspondant à index. S'il n'y a pas d'élément pour cet index, par exemple parce qu'il n'a pas encore été créé ou parce qu'il a été déplacé hors de la zone visible et supprimé du cache, null est renvoyé.

Remarque: cette méthode ne doit être appelée qu'une fois le composant terminé. La valeur renvoyée ne doit pas non plus être stockée, car elle peut devenir nulle dès que le contrôle sort de la portée de l'appel, si la vue libère cet élément.

void moveCurrentIndexDown()

Déplace le site currentIndex d'un élément vers le bas dans la vue. L'index actuel sera repris si keyNavigationWraps est vrai et s'il se trouve à la fin. Cette méthode n'a aucun effet si count est égal à zéro.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

void moveCurrentIndexLeft()

Déplace currentIndex d'un élément à gauche dans la vue. L'index actuel sera repris si keyNavigationWraps est vrai et s'il se trouve à la fin. Cette méthode n'a aucun effet si count est égal à zéro.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

void moveCurrentIndexRight()

Déplace currentIndex vers la droite d'un élément de la vue. L'index actuel sera repris si keyNavigationWraps est vrai et s'il se trouve à la fin. Cette méthode n'a aucun effet si count est égal à zéro.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

void moveCurrentIndexUp()

Déplace le site currentIndex d'un élément vers le haut dans la vue. L'index actuel sera repris si keyNavigationWraps est vrai et s'il se trouve à la fin. Cette méthode n'a aucun effet si count est égal à zéro.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé.

Positionne la vue au début ou à la fin, en tenant compte de l'en-tête ou du pied de page.

Il n'est pas recommandé d'utiliser contentX ou contentY pour positionner la vue à un index particulier. Cette méthode n'est pas fiable, car la suppression d'éléments au début de la liste n'entraîne pas le repositionnement de tous les autres éléments, et parce que le début réel de la vue peut varier en fonction de la taille des délégués.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé. Pour positionner la vue au démarrage, cette méthode doit être appelée par Component.onCompleted. Par exemple, pour positionner la vue à la fin au démarrage :

Component.onCompleted: positionViewAtEnd()

void positionViewAtIndex(int index, PositionMode mode)

Positionne la vue de manière à ce que le site index soit à la position spécifiée par mode:

Si le positionnement de la vue à l'index entraîne l'affichage d'un espace vide au début ou à la fin de la vue, la vue sera positionnée à la limite.

Il n'est pas recommandé d'utiliser contentX ou contentY pour positionner la vue à un index particulier. Cette méthode n'est pas fiable, car la suppression d'éléments au début de la vue n'entraîne pas le repositionnement de tous les autres éléments. La bonne façon d'amener un élément dans la vue est d'utiliser positionViewAtIndex.

Remarque: les méthodes ne doivent être appelées qu'une fois le composant terminé. Pour positionner la vue au démarrage, cette méthode doit être appelée par Component.onCompleted. Par exemple, pour positionner la vue à la fin :

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