GridView QML Type

Para especificar una vista en cuadrícula de los elementos proporcionados por un modelo. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• 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

Propiedades anexas

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

Señales adjuntas

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

Métodos

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

Descripción detallada

Un GridView muestra datos de modelos creados a partir de tipos QML incorporados como ListModel y XmlListModel, o clases de modelos personalizados definidos en C++ que heredan de QAbstractListModel.

Un GridView tiene un model, que define los datos a mostrar, y un delegate, que define cómo deben mostrarse los datos. Los elementos de un GridView se disponen horizontal o verticalmente. Las vistas Grid son inherentemente flickables ya que GridView hereda de Flickable.

Ejemplo de uso

El siguiente ejemplo muestra la definición de un modelo de lista simple definido en un archivo llamado 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"
    }
}

Se puede hacer referencia a este modelo como ContactModel en otros archivos QML. Consulte Módulos Q ML para obtener más información sobre la creación de componentes reutilizables como éste.

Otro componente puede mostrar estos datos del modelo en un GridView, como en el siguiente ejemplo, que crea un componente ContactModel para su modelo, y un Column (que contiene Image y Text elementos) para su delegado.

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 vista creará un nuevo delegado para cada elemento del modelo. Observe que el delegado puede acceder directamente a los datos name y portrait del modelo.

A continuación se muestra una vista de cuadrícula mejorada. El delegado se ha mejorado visualmente y se ha trasladado a un componente separado contactDelegate.

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

El elemento actualmente seleccionado se resalta con un Rectangle azul utilizando la propiedad highlight, y focus se establece en true para permitir la navegación por teclado para la vista de cuadrícula. La propia vista de cuadrícula es un ámbito de enfoque (para más detalles, consulte Enfoque de teclado en Qt Quick ).

Los delegados se instancian según sea necesario y pueden destruirse en cualquier momento. El estado nunca debe almacenarse en un delegado.

GridView adjunta una serie de propiedades al elemento raíz del delegado, por ejemplo GridView.isCurrentItem. En el siguiente ejemplo, el elemento raíz del delegado puede acceder directamente a esta propiedad adjunta como GridView.isCurrentItem, mientras que el objeto hijo contactInfo debe hacer referencia a esta propiedad como 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
}

Diseños GridView

La disposición de los ítems en un GridView puede ser controlada por estas propiedades:

• flow - controla si los ítems fluyen de izquierda a derecha (como una serie de filas) o de arriba a abajo (como una serie de columnas). Este valor puede ser GridView.FlowLeftToRight o GridView.FlowTopToBottom.
• layoutDirection - controla la dirección de la disposición horizontal: es decir, si los elementos se disponen desde el lado izquierdo de la vista hacia la derecha, o viceversa. Este valor puede ser Qt.LeftToRight o Qt.RightToLeft.
• verticalLayoutDirection - controla la dirección de la disposición vertical: es decir, si los elementos se disponen desde la parte superior de la vista hacia la parte inferior de la vista, o viceversa. Este valor puede ser GridView.TopToBottom o GridView.BottomToTop.

Por defecto, un GridView fluye de izquierda a derecha, y los ítems se disponen de izquierda a derecha horizontalmente, y de arriba a abajo verticalmente.

Estas propiedades pueden combinarse para producir una variedad de diseños, como se muestra en la tabla siguiente. Todas las GridViews de la primera fila tienen un valor flow de GridView.FlowLeftToRight, pero utilizan diferentes combinaciones de direcciones de disposición horizontal y vertical (especificadas por layoutDirection y verticalLayoutDirection respectivamente). Del mismo modo, las GridViews de la segunda fila tienen todas un valor flow de GridView.FlowTopToBottom, pero utilizan diferentes combinaciones de direcciones de diseño horizontal y vertical para disponer sus elementos de diferentes maneras.

Véase también Modelos de datos QML, ListView, PathView, y Qt Quick Ejemplos - Vistas.

Documentación de propiedades

add : Transition

Esta propiedad contiene la transición que se aplicará a los elementos que se añadan a la vista.

Por ejemplo, aquí hay una vista que especifica dicha transición:

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

Cada vez que se añada un elemento a la vista, el elemento se animará desde la posición (100,100) hasta su posición final x,y dentro de la vista, durante un segundo. La transición sólo se aplica a los nuevos elementos que se añaden a la vista; no se aplica a los elementos de abajo que son desplazados por la adición de los nuevos elementos. Para animar los elementos desplazados, defina las propiedades displaced o addDisplaced.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación ViewTransition.

Ver también addDisplaced, populate, y ViewTransition.

addDisplaced : Transition

Esta propiedad contiene la transición que se aplicará a los elementos de la vista desplazados por la adición de otros elementos a la vista.

Por ejemplo, aquí hay una vista que especifica una transición de este tipo:

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

Cada vez que se añade un elemento a la vista anterior, todos los elementos situados debajo del nuevo elemento se desplazan, haciendo que se muevan hacia abajo (o hacia los lados, si están orientados horizontalmente) dentro de la vista. A medida que se produce este desplazamiento, el movimiento de los elementos a sus nuevas posiciones x,y dentro de la vista se animará mediante un NumberAnimation a lo largo de un segundo, según se especifique. Esta transición no se aplica al nuevo elemento que se ha añadido a la vista; para animar los elementos añadidos, establezca la propiedad add.

Si un elemento es desplazado por varios tipos de operaciones al mismo tiempo, no está definido si se aplicará la transición addDisplaced, moveDisplaced o removeDisplaced. Además, si no es necesario especificar diferentes transiciones en función de si un elemento es desplazado por una operación de añadir, mover o eliminar, considere la posibilidad de establecer la propiedad displaced en su lugar.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación de ViewTransition.

Véase también displaced, add, populate, y ViewTransition.

cacheBuffer : int

Esta propiedad determina si los delegados se conservan fuera del área visible de la vista.

Si este valor es mayor que cero, la vista puede conservar tantos delegados instanciados como quepan en el búfer especificado. Por ejemplo, si en una vista vertical el delegado tiene una altura de 20 píxeles, hay 3 columnas y cacheBuffer está ajustado a 40, entonces se podrán crear/conservar hasta 6 delegados por encima y 6 delegados por debajo del área visible. Los delegados con búfer se crean de forma asíncrona, lo que permite que la creación se produzca a lo largo de varios fotogramas y reduce la probabilidad de que se salten fotogramas. Para mejorar el rendimiento de pintado, los delegados fuera del área visible no se pintan.

El valor por defecto de esta propiedad depende de la plataforma, pero normalmente será un valor mayor que cero. Los valores negativos se ignoran.

Tenga en cuenta que cacheBuffer no es un buffer de píxeles - sólo mantiene delegados adicionales instanciados.

El cacheBuffer opera fuera de cualquier margen de visualización especificado por displayMarginBeginning o displayMarginEnd.

Estas propiedades contienen la anchura y la altura de cada celda de la cuadrícula.

El tamaño de celda por defecto es 100x100.

count : int [read-only]

Esta propiedad contiene el número de elementos del modelo.

La propiedad currentIndex contiene el índice del elemento actual, y currentItem contiene el elemento actual. Establecer currentIndex a -1 borrará el resalte y establecerá currentItem a null.

Si highlightFollowsCurrentItem es true, al establecer cualquiera de estas propiedades se desplazará suavemente GridView para que el elemento actual sea visible.

Tenga en cuenta que la posición del elemento actual sólo puede ser aproximada hasta que se haga visible en la vista.

delegate : Component

El delegado proporciona una plantilla que define cada elemento instanciado por la vista. El índice se expone como una propiedad accesible index. Las propiedades del modelo también están disponibles dependiendo del tipo de Modelo de Datos.

El número de objetos y enlaces en el delegado tiene un efecto directo en el rendimiento de la vista. Si es posible, coloque la funcionalidad que no sea necesaria para la visualización normal del delegado en un Loader que pueda cargar componentes adicionales cuando sea necesario.

El tamaño de los elementos de GridView viene determinado por cellHeight y cellWidth. No cambiará el tamaño de los elementos en función del tamaño del elemento raíz del delegado.

La dirección stacking order predeterminada de las instancias de delegado es 1.

delegateModelAccess : enumeration [since 6.10]

Esta propiedad determina cómo los delegados pueden acceder al modelo.

El valor por defecto es DelegateModel.Qt5ReadWrite.

Esta propiedad se introdujo en Qt 6.10.

Ver también Modelos y Vistas en Qt Quick#CambiandoDatos del Modelo.

displaced : Transition

Esta propiedad contiene la transición genérica que se aplicará a los elementos que hayan sido desplazados por cualquier operación del modelo que afecte a la vista.

Es conveniente para especificar una transición genérica para elementos que son desplazados por operaciones de añadir, mover o eliminar, sin tener que especificar las propiedades individuales addDisplaced, moveDisplaced y removeDisplaced. Por ejemplo, aquí hay una vista que especifica una transición desplazada:

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

Cuando se añade, mueve o elimina un elemento en la vista anterior, los elementos situados debajo se desplazan hacia abajo (o hacia los lados, si están orientados horizontalmente) dentro de la vista. A medida que se produce este desplazamiento, el movimiento de los elementos a sus nuevas posiciones x,y dentro de la vista se animará mediante un NumberAnimation a lo largo de un segundo, según se especifique.

Si una vista especifica esta transición genérica desplazada, así como una transición específica addDisplaced, moveDisplaced o removeDisplaced, se utilizará la transición más específica en lugar de la transición genérica desplazada cuando se produzca la operación correspondiente, siempre que la transición más específica no se haya desactivado (estableciendo enabled en false). Si se ha desactivado, se aplicará la transición genérica desplazada.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación ViewTransition.

Véase también addDisplaced, moveDisplaced, removeDisplaced, y ViewTransition.

Esta propiedad permite que los delegados se muestren fuera de la geometría de la vista.

Si este valor es distinto de cero, la vista creará delegados adicionales antes del inicio de la vista, o después del final. La vista creará tantos delegados como quepan en el tamaño de píxel especificado.

Por ejemplo, si en una vista vertical el delegado tiene 20 píxeles de alto, hay 3 columnas, y displayMarginBeginning y displayMarginEnd están ambos ajustados a 40, entonces se crearán y mostrarán 6 delegados arriba y 6 delegados abajo.

El valor por defecto es 0.

Esta propiedad está pensada para permitir ciertas configuraciones de la interfaz de usuario, y no como una optimización del rendimiento. Si deseas crear delegados fuera de la geometría de la vista por razones de rendimiento, probablemente quieras utilizar la propiedad cacheBuffer en su lugar.

Estas propiedades se introdujeron en QtQuick 2.3.

effectiveLayoutDirection : enumeration [read-only]

Esta propiedad contiene la dirección efectiva de la rejilla.

Cuando se utiliza la propiedad adjunta LayoutMirroring::enabled para diseños locales, la dirección del diseño visual de la rejilla se reflejará. Sin embargo, la propiedad layoutDirection permanecerá inalterada.

Véase también GridView::layoutDirection y LayoutMirroring.

flow : enumeration

Esta propiedad contiene el flujo de la rejilla.

Valores posibles:

footer : Component

Esta propiedad contiene el componente que se utilizará como pie de página.

Se crea una instancia del componente pie de página para cada vista. El pie de página se coloca al final de la vista, después de cualquier elemento. stacking order El pie de página por defecto es 1.

Véase también header y footerItem.

footerItem : Item [read-only]

Contiene el elemento de pie de página creado a partir del componente footer.

Se crea una instancia del componente pie de página para cada vista. El pie de página se coloca al final de la vista, después de cualquier elemento. El stacking order predeterminado del pie de página es 1.

Véase también footer y headerItem.

header : Component

Esta propiedad contiene el componente que se utilizará como cabecera.

Se crea una instancia del componente de cabecera para cada vista. La cabecera se coloca al principio de la vista, antes de cualquier elemento. La cabecera predeterminada stacking order es 1.

Véase también footer y headerItem.

headerItem : Item [read-only]

Contiene el elemento de cabecera creado a partir del componente header.

Se crea una instancia del componente de cabecera para cada vista. La cabecera se coloca al principio de la vista, antes de cualquier elemento. El stacking order predeterminado de la cabecera es 1.

Véase también header y footerItem.

highlight : Component

Esta propiedad contiene el componente que se utilizará como resaltado.

Se crea una instancia del componente de resaltado para cada vista. La geometría de la instancia del componente resultante será gestionada por la vista de forma que permanezca con el elemento actual, a menos que la propiedad highlightFollowsCurrentItem sea false. El valor por defecto stacking order del elemento destacado es 0.

Véase también highlightItem y highlightFollowsCurrentItem.

highlightFollowsCurrentItem : bool

Esta propiedad establece si el resaltado es manejado por la vista.

Si esta propiedad es true (el valor por defecto), el resaltado se mueve suavemente para seguir al elemento actual. En caso contrario, el cursor no es movido por la vista, y cualquier movimiento debe ser implementado por el cursor.

Aquí se muestra un elemento destacado con su movimiento definido por un elemento 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]

Contiene el elemento destacado creado a partir del componente highlight.

El highlightItem es gestionado por la vista a menos que highlightFollowsCurrentItem se establezca en false. El valor por defecto de stacking order es 0.

Véase también highlight y highlightFollowsCurrentItem.

highlightMoveDuration : int

Esta propiedad contiene la duración de la animación de movimiento del delegado de resaltado.

highlightFollowsCurrentItem debe ser true para que esta propiedad tenga efecto.

El valor por defecto para la duración es 150ms.

Ver también highlightFollowsCurrentItem.

Estas propiedades definen el rango preferido del resalte (para el elemento actual) dentro de la vista. El valor preferredHighlightBegin debe ser menor que el valor preferredHighlightEnd.

Estas propiedades afectan a la posición del elemento actual cuando se desplaza la vista. Por ejemplo, si el elemento actualmente seleccionado debe permanecer en el centro de la vista cuando se desplaza, establezca los valores preferredHighlightBegin y preferredHighlightEnd en las coordenadas superior e inferior de donde estaría el elemento central. Si currentItem se cambia mediante programación, la vista se desplazará automáticamente para que el elemento actual se encuentre en el centro de la vista. Además, el comportamiento del índice del elemento actual se producirá exista o no resalte.

Los valores válidos para highlightRangeMode son:

keyNavigationEnabled : bool

Esta propiedad mantiene si la navegación por teclado de la rejilla está habilitada.

Si es true, el usuario puede navegar por la vista con el teclado. Es útil para aplicaciones que necesitan habilitar o deshabilitar selectivamente la interacción con el ratón y el teclado.

Por defecto, el valor de esta propiedad está vinculado a interactive para asegurar la compatibilidad de comportamiento de las aplicaciones existentes. Cuando se establezca explícitamente, dejará de estar vinculada a la propiedad interactive.

Véase también interactive.

keyNavigationWraps : bool

Esta propiedad indica si la rejilla envuelve la navegación por teclas.

Si es true, la navegación por teclas que movería la selección del ítem actual más allá de un extremo de la vista, en su lugar se envuelve y mueve la selección al otro extremo de la vista.

Por defecto, la navegación por teclas no se envuelve.

layoutDirection : enumeration

Esta propiedad contiene la dirección de diseño de la rejilla.

Valores posibles:

Nota: Si GridView::flow tiene el valor GridView.FlowLeftToRight, no debe confundirse con GridView::layoutDirection si tiene el valor Qt.RightToLeft. El valor de flujo GridView.FlowLeftToRight simplemente indica que el flujo es horizontal.

Véase también GridView::effectiveLayoutDirection y GridView::verticalLayoutDirection.

model : model

Esta propiedad contiene el modelo que proporciona los datos para la rejilla.

El modelo proporciona el conjunto de datos que se utiliza para crear los elementos de la vista. Los modelos pueden crearse directamente en QML utilizando ListModel, DelegateModel, ObjectModel, o ser proporcionados por clases de modelos C++. Si se utiliza una clase de modelo C++, debe ser una subclase de QAbstractItemModel o una lista simple.

Véase también Modelos de datos.

move : Transition

Esta propiedad contiene la transición que se aplicará a los elementos de la vista que se están moviendo debido a una operación de movimiento en la vista model.

Por ejemplo, a continuación se muestra una vista que especifica una transición de este tipo:

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

Siempre que model realice una operación de movimiento para desplazar un determinado conjunto de índices, los elementos respectivos de la vista se animarán a sus nuevas posiciones en la vista durante un segundo. La transición sólo se aplica a los elementos que son objeto de la operación de movimiento en el modelo; no se aplica a los elementos situados por debajo de ellos que son desplazados por la operación de movimiento. Para animar los elementos desplazados, defina las propiedades displaced o moveDisplaced.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación ViewTransition.

Véase también moveDisplaced y ViewTransition.

moveDisplaced : Transition

Esta propiedad contiene la transición que se aplicará a los elementos desplazados por una operación de movimiento en la vista model.

Por ejemplo, a continuación se muestra una vista que especifica una transición de este tipo:

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

Cada vez que model realiza una operación de movimiento para desplazar un determinado conjunto de índices, los elementos situados entre los índices de origen y destino de la operación de movimiento se desplazan, haciendo que se muevan hacia arriba o hacia abajo (o lateralmente, si están orientados horizontalmente) dentro de la vista. A medida que se produce este desplazamiento, el movimiento de los elementos a sus nuevas posiciones x,y dentro de la vista se animará mediante un NumberAnimation a lo largo de un segundo, según se especifique. Esta transición no se aplica a los elementos que son los sujetos reales de la operación de desplazamiento; para animar los elementos desplazados, establezca la propiedad move.

Si un elemento es desplazado por varios tipos de operaciones al mismo tiempo, no está definido si se aplicará la transición addDisplaced, moveDisplaced o removeDisplaced. Además, si no es necesario especificar diferentes transiciones en función de si un elemento es desplazado por una operación de añadir, mover o eliminar, considere la posibilidad de establecer la propiedad displaced en su lugar.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación de ViewTransition.

Véase también displaced, move, y ViewTransition.

populate : Transition

Esta propiedad contiene la transición a aplicar a los elementos que se crean inicialmente para una vista.

Se aplica a todos los elementos que se crean cuando:

• La vista se crea por primera vez
• El model de la vista cambia de tal forma que los delegados visibles son completamente reemplazados.
• El model de la vista es reset, si el modelo es una subclase QAbstractItemModel

Por ejemplo, aquí hay una vista que especifica una transición de este tipo:

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

Cuando la vista se inicializa, la vista creará todos los elementos necesarios para la vista, luego los animará a sus posiciones correctas dentro de la vista durante un segundo.

Sin embargo, cuando se desplaza la vista más tarde, la transición de poblar no se ejecuta, a pesar de que los delegados se instancian a medida que se hacen visibles. Cuando el modelo cambia de manera que los nuevos delegados se hacen visibles, la transición add es la que se ejecuta. Así que no debes depender de la transición populate para inicializar propiedades en el delegado, porque no se aplica a todos los delegados. Si tu animación establece el valor to de una propiedad, la propiedad debe tener inicialmente el valor to, y la animación debe establecer el valor from en caso de que sea animada:

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

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulta la documentación de ViewTransition.

Véase también add y ViewTransition.

remove : Transition

Esta propiedad contiene la transición que se aplicará a los elementos que se eliminen de la vista.

Por ejemplo, aquí hay una vista que especifica dicha transición:

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

Cada vez que se elimine un elemento de la vista anterior, el elemento se animará a la posición (100,100) durante un segundo, y paralelamente también cambiará su opacidad a 0. La transición sólo se aplica a los elementos que se eliminan de la vista; no se aplica a los elementos situados debajo de ellos que son desplazados por la eliminación de los elementos. Para animar los elementos desplazados, ajuste las propiedades displaced o removeDisplaced.

Tenga en cuenta que cuando se aplica la transición, el elemento ya se ha eliminado del modelo; cualquier referencia a los datos del modelo para el índice eliminado no será válida.

Además, si se ha establecido la propiedad adjunta delayRemove para un elemento delegado, la transición de eliminación no se aplicará hasta que delayRemove vuelva a ser falsa.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación de ViewTransition.

Véase también removeDisplaced y ViewTransition.

removeDisplaced : Transition

Esta propiedad contiene la transición que se aplicará a los elementos de la vista desplazados por la eliminación de otros elementos de la vista.

Por ejemplo, aquí hay una vista que especifica una transición de este tipo:

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

Cada vez que se elimina un elemento de la vista anterior, todos los elementos situados debajo de él se desplazan, haciendo que se muevan hacia arriba (o hacia los lados, si están orientados horizontalmente) dentro de la vista. A medida que se produce este desplazamiento, el movimiento de los elementos a sus nuevas posiciones x,y dentro de la vista se animará mediante un NumberAnimation a lo largo de un segundo, según se especifique. Esta transición no se aplica al elemento que realmente se ha eliminado de la vista; para animar los elementos eliminados, establezca la propiedad remove.

Si un elemento es desplazado por varios tipos de operaciones al mismo tiempo, no está definido si se aplicará la transición addDisplaced, moveDisplaced o removeDisplaced. Además, si no es necesario especificar transiciones diferentes en función de si un elemento es desplazado por una operación de añadir, mover o eliminar, considere la posibilidad de establecer la propiedad displaced en su lugar.

Para más detalles y ejemplos sobre cómo utilizar las transiciones de vista, consulte la documentación de ViewTransition.

Véase también displaced, remove, y ViewTransition.

reuseItems : bool

Esta propiedad permite reutilizar los elementos que se instancian desde delegate. Si se establece en false, se destruyen todos los elementos agrupados actualmente.

Esta propiedad es false por defecto.

Véase también Reusing items, pooled(), y reused().

snapMode : enumeration

Esta propiedad determina cómo se asentará el desplazamiento de la vista tras un arrastre o un desplazamiento. Los valores posibles son:

verticalLayoutDirection : enumeration

Esta propiedad contiene la dirección de diseño vertical de la rejilla.

Valores posibles:

Véase también GridView::layoutDirection.

Documentación de la propiedad Attached

GridView.delayRemove : bool

Esta propiedad adjunta indica si el delegado puede ser destruido. Se adjunta a cada instancia del delegado. El valor por defecto es false.

A veces es necesario retrasar la destrucción de un elemento hasta que finalice una animación. El delegado de ejemplo que se muestra a continuación garantiza que la animación finalice antes de que el elemento se elimine de la lista.

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 se ha especificado una transición remove, no se aplicará hasta que delayRemove se devuelva a false.

GridView.isCurrentItem : bool [read-only]

Esta propiedad adjunta es verdadera si este delegado es el elemento actual; en caso contrario, es falsa.

Se adjunta a cada instancia del delegado.

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]

Esta propiedad adjunta contiene la vista que gestiona esta instancia de delegado.

Se adjunta a cada instancia del delegado y también a los delegados de cabecera, pie de página y resaltado.

Documentación de la señal adjunta

add()

Esta señal adjunta se emite inmediatamente después de añadir un elemento a la vista.

pooled()

Esta señal se emite después de que un elemento se haya añadido a la reserva de reutilización. Se puede utilizar para pausar temporizadores o animaciones en curso dentro del elemento, o para liberar recursos que no se pueden reutilizar.

Esta señal sólo se emite si la propiedad reuseItems es true.

Véase también Reusing items, reuseItems, y reused().

remove()

Esta señal adjunta se emite inmediatamente antes de que se elimine un elemento de la vista.

Si se ha especificado una transición de eliminación, se aplica después de gestionar esta señal, siempre que delayRemove sea false.

reused()

Esta señal se emite después de que un elemento haya sido reutilizado. En este punto, el elemento ha sido sacado del pool y colocado dentro de la vista de contenido, y las propiedades del modelo como index y row han sido actualizadas.

Otras propiedades que no son proporcionadas por el modelo no cambian cuando un elemento es reutilizado. Debes evitar almacenar cualquier estado dentro de un delegado, pero si lo haces, restablece manualmente ese estado al recibir esta señal.

Esta señal se emite cuando se reutiliza un elemento, y no la primera vez que se crea.

Esta señal sólo se emite si la propiedad reuseItems es true.

Véase también Reusing items, reuseItems, y pooled().

Documentación del método

void forceLayout()

La respuesta a los cambios en el modelo se produce normalmente una vez por fotograma. Esto significa que dentro de los bloques de script es posible que el modelo subyacente haya cambiado, pero que GridView aún no se haya puesto al día.

Este método fuerza a GridView a responder inmediatamente a cualquier cambio pendiente en el modelo.

Nota: los métodos sólo deben ser llamados después de que el Componente se haya completado.

int indexAt(real x, real y)

Devuelve el índice del elemento visible que contiene el punto x, y en coordenadas content item. Si no hay ningún elemento en el punto especificado, o el elemento no es visible, se devuelve -1.

Si el elemento está fuera del área visible, se devuelve -1, independientemente de que exista un elemento en ese punto cuando se desplace a la vista.

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

Nota: los métodos sólo deben llamarse después de que el Componente haya finalizado.

Véase también itemAt.

Item itemAt(real x, real y)

Devuelve el elemento visible que contiene el punto x, y en coordenadas content item. Si no hay ningún elemento en el punto especificado, o el elemento no es visible, se devuelve null.

Si el elemento está fuera del área visible, se devuelve null, independientemente de que exista un elemento en ese punto cuando se desplace a la vista.

Nota: los métodos sólo deben invocarse una vez finalizado el Componente.

Véase también indexAt.

Item itemAtIndex(int index)

Devuelve el elemento para index. Si no hay ningún elemento para ese índice, por ejemplo porque aún no se ha creado, o porque se ha desplazado fuera del área visible y se ha eliminado de la caché, se devuelve null.

Nota: este método sólo debe invocarse después de que el Componente haya finalizado. El valor devuelto tampoco debe ser almacenado ya que puede convertirse en null tan pronto como el control salga del ámbito de llamada, si la vista libera ese elemento.

void moveCurrentIndexDown()

Mueve el currentIndex hacia abajo un elemento en la vista. El índice actual se envolverá si keyNavigationWraps es verdadero y se encuentra actualmente al final. Este método no tiene efecto si count es cero.

Nota: los métodos sólo deben ser llamados después de que el Componente haya finalizado.

void moveCurrentIndexLeft()

Mueve el currentIndex a la izquierda un elemento en la vista. El índice actual se envolverá si keyNavigationWraps es verdadero y está actualmente al final. Este método no tiene efecto si count es cero.

Nota: los métodos sólo deben ser llamados después de que el Componente haya finalizado.

void moveCurrentIndexRight()

Mueve el currentIndex a la derecha un elemento en la vista. El índice actual se envolverá si keyNavigationWraps es verdadero y está actualmente al final. Este método no tiene efecto si count es cero.

Nota: los métodos sólo deben ser llamados después de que el Componente haya finalizado.

void moveCurrentIndexUp()

Mueve currentIndex un elemento hacia arriba en la vista. El índice actual se envolverá si keyNavigationWraps es verdadero y se encuentra actualmente al final. Este método no tiene efecto si count es cero.

Nota: los métodos sólo deben ser llamados después de que el Componente haya finalizado.

Posiciona la vista al principio o al final, teniendo en cuenta cualquier encabezado o pie de página.

No se recomienda utilizar contentX o contentY para posicionar la vista en un índice concreto. Esto es poco fiable ya que eliminar elementos del inicio de la lista no provoca que todos los demás elementos se reposicionen, y porque el inicio real de la vista puede variar en función del tamaño de los delegados.

Nota: los métodos sólo deben ser llamados después de que el Componente se haya completado. Para posicionar la vista al inicio, este método debe ser llamado por Component.onCompleted. Por ejemplo, para posicionar la vista al final al inicio:

Component.onCompleted: positionViewAtEnd()

void positionViewAtIndex(int index, PositionMode mode)

Posiciona la vista de forma que index se encuentre en la posición especificada por mode:

Si posicionar la vista en el índice provocara que se mostrara un espacio vacío al principio o al final de la vista, ésta se posicionará en el límite.

No se recomienda utilizar contentX o contentY para posicionar la vista en un índice concreto. Esto no es fiable, ya que eliminar elementos del inicio de la vista no provoca que todos los demás elementos se reposicionen. La forma correcta de traer un elemento a la vista es con positionViewAtIndex.

Nota: los métodos sólo deben ser llamados después de que el Componente se haya completado. Para posicionar la vista al inicio, este método debe ser llamado por Component.onCompleted. Por ejemplo, para posicionar la vista al final:

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