SwipeDelegate QML Type

Délégué d'élément « Swipable ». En savoir plus...

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

Propriétés

• 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

Propriétés associées

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

Signaux

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

Signaux associés

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

Méthodes

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

Description détaillée

SwipeDelegate présente un élément de vue sur lequel on peut faire glisser le doigt vers la gauche ou vers la droite pour afficher davantage d’options ou d’informations. Il est utilisé comme délégué dans des vues telles que ListView.

Dans l'exemple suivant, SwipeDelegate est utilisé dans une vue de type « ListView » pour permettre de supprimer des éléments de celle-ci en faisant glisser vers la gauche :

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 hérite de son API de ItemDelegate, qui hérite lui-même de AbstractButton. Par exemple, vous pouvez définir text et réagir à clicks à l’aide de l’API AbstractButton.

Les informations relatives à la progression d’un balayage, ainsi que les composants qui doivent s’afficher lors du balayage, sont toutes deux disponibles via l’objet de propriétés groupées swipe. Par exemple, ` swipe.position ` contient la position du glissement dans la plage comprise entre ` -1.0 ` et ` 1.0`. La propriété ` swipe.left ` détermine quel élément s’affichera lorsque le contrôle sera glissé vers la droite, et inversement pour ` swipe.right`. Le positionnement de ces composants est laissé à la discrétion des applications. Par exemple, si aucune position n’est spécifiée pour ` swipe.left ` ou ` swipe.right`, le résultat suivant s’obtiendra :

Si swipe.left et swipe.right sont ancrés respectivement à gauche et à droite de l’élément background, ils se comporteront ainsi :

Lorsque vous utilisez swipe.left et swipe.right, le contrôle ne peut pas être fait glisser au-delà des bords gauche et droit. Pour obtenir ce type de comportement de « bouclage », définissez plutôt swipe.behind. Cela aura pour effet d’afficher le même élément quelle que soit la direction dans laquelle le contrôle est fait glisser. Par exemple, dans l’image ci-dessous, nous avons défini swipe.behind, puis fait glisser le contrôle à plusieurs reprises dans les deux sens :

Voir également Personnalisation de SwipeDelegate, Contrôles délégués et Exemple de galerie.

Documentation sur les propriétés

swipe group

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

Voir également contentItem, background, swipe.open() et swipe.close().

Documentation sur les propriétés associées

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

Cette propriété peut être associée à un élément non interactif déclaré dans swipe.left, swipe.right ou swipe.behind, afin de détecter s'il est enfoncé. Les éléments ne peuvent être enfoncés que lorsque swipe.complete vaut true.

Par exemple :

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

Il est possible d'avoir plusieurs éléments qui reçoivent individuellement des événements de souris et tactiles. Par exemple, pour disposer de deux actions dans l'élément swipe.right, utilisez le code suivant :

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

Notez que l’affectation ` color ` dans chaque élément ` background ` qualifie la propriété attachée avec l’ id e de l’étiquette. Ceci est important : l’utilisation des propriétés attachées sur un élément permet à celui-ci d’accepter les événements. Supposons que nous ayons omis l’ id dans l’exemple précédent :

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

L’élément d’arrière-plan Rectangle est un enfant de l’étiquette ; il reçoit donc naturellement les événements avant celle-ci. En pratique, cela signifie que la couleur d’arrière-plan changera, mais que le gestionnaire onClicked de l’étiquette ne sera jamais appelé.

Pour les contrôles interactifs (tels que Button) déclarés dans ces éléments, utilisez plutôt leur propriété pressed respective.

Pour les pressions sur l’ SwipeDelegate lui-même, utilisez sa propriété ` pressed `.

Cette propriété a été introduite dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également clicked().

Documentation sur les signaux

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

Ce signal est émis lorsque le délégué a été glissé pour être fermé et que la transition est terminée.

Il est utile pour effectuer une action en cas d'annulation d'un glissement. Par exemple, il peut être utilisé pour annuler la suppression du délégué de la liste dans laquelle il se trouve.

Ce signal a été introduit dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également ` swipe ` et ` swipe.opened()`.

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

Ce signal est émis lorsque swipe.complete devient true.

Il est utile pour effectuer une action à la fin d'un glissement. Par exemple, il peut être utilisé pour retirer le délégué de la liste dans laquelle il se trouve.

Ce signal a été introduit dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également swipe.

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

Ce signal est émis lorsque le délégué a été ouvert par un glissement et que la transition est terminée.

Il est utile pour effectuer une action une fois le glissement terminé. Par exemple, il peut être utilisé pour retirer le délégué de la liste dans laquelle il se trouve.

Ce signal a été introduit dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également ` swipe ` et ` swipe.closed()`.

Documentation sur les signaux associés

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

Ce signal peut être associé à un élément non interactif déclaré dans swipe.left, swipe.right ou swipe.behind, afin de réagir aux clics. Les éléments ne peuvent être cliqués que lorsque swipe.complete vaut true.

Pour les contrôles interactifs (tels que ` Button`) déclarés dans ces éléments, utilisez plutôt leur signal ` clicked() ` respectif.

Pour répondre aux clics sur l’ SwipeDelegate lui-même, utilisez son signal clicked().

Ce signal a été introduit dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également pressed.

Documentation des méthodes

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

Cette méthode définit l'position e du glissement sur 0. Toutes les animations définies pour la position x de contentItem et background seront déclenchées.

Cette méthode a été introduite dans QtQuick.Controls 2.1 (Qt 5.8).

Voir également swipe et swipe.open().

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

Cette méthode définit l'position e du glissement de manière à ce que la page s'ouvre à partir de l'side spécifiée.

Valeurs disponibles :

Toutes les animations définies pour la position de l’ x « contentItem » et « background » seront déclenchées.

Cette méthode a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir également swipe et swipe.close().