SwipeDelegate QML Type

Delegado de elemento deslizable. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• swipe
  • swipe.behind : Component
  • swipe.behindItem : Item
  • swipe.complete : bool
  • swipe.enabled : bool
  • swipe.left : Component
  • swipe.leftItem : Item
  • swipe.position : real
  • swipe.right : Component
  • swipe.rightItem : Item
  • swipe.transition : Transition

Propiedades anexas

• pressed : bool (since QtQuick.Controls 2.1 (Qt 5.8))

Señales

• void swipe.closed() (since QtQuick.Controls 2.2 (Qt 5.9))
• void swipe.completed() (since QtQuick.Controls 2.1 (Qt 5.8))
• void swipe.opened() (since QtQuick.Controls 2.2 (Qt 5.9))

Señales adjuntas

• clicked() (since QtQuick.Controls 2.1 (Qt 5.8))

Métodos

• void swipe.close() (since QtQuick.Controls 2.1 (Qt 5.8))
• void swipe.open(enumeration side) (since QtQuick.Controls 2.2 (Qt 5.9))

Descripción detallada

SwipeDelegate presenta un elemento de la vista que puede deslizarse hacia la izquierda o la derecha para mostrar más opciones o información. Se utiliza como delegado en vistas como ListView.

En el siguiente ejemplo, SwipeDelegate se utiliza en ListView para permitir que se eliminen elementos de la vista deslizando el dedo hacia la izquierda:

ListView {
    id: listView
    anchors.fill: parent
    model: ListModel {
        ListElement { sender: "Bob Bobbleton"; title: "How are you going?" }
        ListElement { sender: "Rug Emporium"; title: "SALE! All rugs MUST go!" }
        ListElement { sender: "Electric Co."; title: "Electricity bill 15/07/2016 overdue" }
        ListElement { sender: "Tips"; title: "Five ways this tip will save your life" }
    }
    delegate: SwipeDelegate {
        id: swipeDelegate
        text: sender + " - " + title
        width: listView.width

        required property string sender
        required property string title
        required property int index

        ListView.onRemove: removeAnimation.start()

        SequentialAnimation {
            id: removeAnimation

            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: true
            }
            NumberAnimation {
                target: swipeDelegate
                property: "height"
                to: 0
                easing.type: Easing.InOutQuad
            }
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: false
            }
        }

        swipe.right: Label {
            id: deleteLabel
            text: qsTr("Delete")
            color: "white"
            verticalAlignment: Label.AlignVCenter
            padding: 12
            height: parent.height
            anchors.right: parent.right

            SwipeDelegate.onClicked: listView.model.remove(index)

            background: Rectangle {
                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
            }
        }
    }
}

SwipeDelegate hereda su API de ItemDelegate, que a su vez hereda de AbstractButton. Por ejemplo, puede configurar text, y reaccionar a clicks utilizando la API AbstractButton.

La información relativa al progreso de un deslizamiento, así como los componentes que deben mostrarse al deslizar, están disponibles a través del objeto de propiedades agrupadas swipe. Por ejemplo, swipe.position mantiene la posición del swipe dentro del rango -1.0 a 1.0. La propiedad swipe.left determina qué elemento se mostrará cuando el control se deslice hacia la derecha, y viceversa para swipe.right. El posicionamiento de estos componentes se deja a la decisión de las aplicaciones. Por ejemplo, sin especificar ninguna posición para swipe.left o swipe.right, ocurrirá lo siguiente:

Si swipe.left y swipe.right están anclados a la izquierda y a la derecha del elemento background (respectivamente), se comportarán así:

Si se utilizan swipe.left y swipe.right, el control no podrá deslizarse más allá de los bordes izquierdo y derecho. Para lograr este tipo de comportamiento "envolvente", establezca swipe.behind en su lugar. Esto hará que se muestre el mismo elemento independientemente de la dirección en la que se deslice el control. Por ejemplo, en la imagen siguiente, definimos swipe.behind y deslizamos el control repetidamente en ambas direcciones:

Consulte también Personalización de SwipeDelegate, Controles delegados y Ejemplo de galería.

Documentación de propiedades

swipe group

SwipeDelegate {
    swipe.transition: Transition {
        SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic }
    }
}

Véase también contentItem, background, swipe.open(), y swipe.close().

Documentación de la propiedad Attached

SwipeDelegate.pressed : bool [read-only, since QtQuick.Controls 2.1 (Qt 5.8)]

Esta propiedad puede adjuntarse a un elemento no interactivo declarado en swipe.left, swipe.right, o swipe.behind, para detectar si está pulsado. Los elementos sólo pueden ser pulsados cuando swipe.complete es true.

Por ejemplo:

swipe.right: Label {
    anchors.right: parent.right
    height: parent.height
    text: "Action"
    color: "white"
    padding: 12
    background: Rectangle {
        color: SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
    }
}

Es posible tener múltiples ítems que reciban individualmente eventos de ratón y táctiles. Por ejemplo, para tener dos acciones en el ítem swipe.right, utilice el siguiente código:

swipe.right: Row {
    anchors.right: parent.right
    height: parent.height

    Label {
        id: moveLabel
        text: qsTr("Move")
        color: "white"
        verticalAlignment: Label.AlignVCenter
        padding: 12
        height: parent.height

        SwipeDelegate.onClicked: console.log("Moving...")

        background: Rectangle {
            color: moveLabel.SwipeDelegate.pressed ? Qt.darker("#ffbf47", 1.1) : "#ffbf47"
        }
    }
    Label {
        id: deleteLabel
        text: qsTr("Delete")
        color: "white"
        verticalAlignment: Label.AlignVCenter
        padding: 12
        height: parent.height

        SwipeDelegate.onClicked: console.log("Deleting...")

        background: Rectangle {
            color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
        }
    }
}

Observe cómo la asignación color en cada ítem background califica la propiedad adjunta con el id de la etiqueta. Esto es importante; usar las propiedades adjuntas en un elemento hace que ese elemento acepte eventos. Supongamos que hubiéramos omitido el id en el ejemplo anterior:

color: SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"

El elemento de fondo Rectangle es hijo de la etiqueta, por lo que naturalmente recibe eventos antes que ella. En la práctica, esto significa que el color de fondo cambiará, pero el manejador onClicked de la etiqueta nunca será llamado.

Para los controles interactivos (como Button) declarados en estos elementos, utilice su respectiva propiedad pressed en su lugar.

Para pulsaciones en el propio SwipeDelegate, utilice su propiedad pressed.

Esta propiedad se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Véase también clicked().

Documentación de Señales

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.closed()

Esta señal se emite cuando el delegado ha sido swipeado a cerrado y la transición ha finalizado.

Es útil para realizar alguna acción tras la cancelación de un swipe. Por ejemplo, se puede utilizar para cancelar la eliminación del delegado de la lista en la que se encuentra.

Esta señal se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Véase también swipe y swipe.opened().

[since QtQuick.Controls 2.1 (Qt 5.8)] void swipe.completed()

Esta señal se emite cuando swipe.complete se convierte en true.

Es útil para realizar alguna acción al finalizar un swipe. Por ejemplo, se puede utilizar para eliminar el delegado de la lista en la que se encuentra.

Esta señal se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Véase también swipe.

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.opened()

Esta señal se emite cuando el delegado ha sido deslizado y la transición ha finalizado.

Es útil para realizar alguna acción al finalizar el deslizamiento. Por ejemplo, puede utilizarse para eliminar el delegado de la lista en la que se encuentra.

Esta señal se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Véase también swipe y swipe.closed().

Documentación de la señal adjunta

[since QtQuick.Controls 2.1 (Qt 5.8)] clicked()

Esta señal puede adjuntarse a un elemento no interactivo declarado en swipe.left, swipe.right, o swipe.behind, para reaccionar a los clics. Sólo se puede hacer clic en los elementos cuando swipe.complete es true.

Para los controles interactivos (como Button) declarados en estos elementos, utilice su respectiva señal clicked() en su lugar.

Para responder a los clics en el propio SwipeDelegate, utilice su señal clicked().

Esta señal se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Ver también pressed.

Documentación del Método

[since QtQuick.Controls 2.1 (Qt 5.8)] void swipe.close()

Este método establece el position del swipe en 0. Se activarán todas las animaciones definidas para la posición x de contentItem y background.

Este método se introdujo en QtQuick.Controls 2.1 (Qt 5.8).

Véase también swipe y swipe.open().

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.open(enumeration side)

Este método establece el position del swipe para que se abra desde el side especificado.

Valores disponibles:

Se activarán todas las animaciones definidas para la posición x de contentItem y background.

Este método se introdujo en QtQuick.Controls 2.2 (Qt 5.9).

Véase también swipe y swipe.close().