SwipeDelegate QML Type

Délégué de l'article à balayer. Plus d'informations...

• 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 rattaché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 attaché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 qui peut être balayé vers la gauche ou la droite pour exposer plus 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 page ListView pour permettre de supprimer des éléments en les 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 son API de ItemDelegate, qui hérite 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 glissement, ainsi que les composants qui doivent être affichés lors du glissement, sont tous deux disponibles par l'intermédiaire de l'objet de propriété groupée swipe. Par exemple, swipe.position indique la position du balayage entre -1.0 et 1.0. La propriété swipe.left détermine l'élément qui sera affiché lorsque le contrôle est balayé vers la droite, et vice versa pour swipe.right. Le positionnement de ces composants est laissé à l'appréciation des applications. Par exemple, sans spécifier de position pour swipe.left ou swipe.right, il se produira ce qui suit :

Si swipe.left et swipe.right sont ancrés à gauche et à droite de l'élément background (respectivement), ils se comporteront comme suit :

Lors de l'utilisation de swipe.left et swipe.right, le contrôle ne peut pas être déplacé au-delà des bords gauche et droit. Pour obtenir ce type de comportement "enveloppant", définissez plutôt swipe.behind. Ainsi, le même élément s'affichera quelle que soit la direction dans laquelle le contrôle est balayé. Par exemple, dans l'image ci-dessous, nous avons défini swipe.behind, puis nous avons fait glisser le contrôle à plusieurs reprises dans les deux directions :

Voir aussi 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 la propriété attachée

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

Cette propriété peut être attachée à un élément non interactif déclaré dans swipe.left, swipe.right, ou swipe.behind, afin de détecter s'il est pressé. Les éléments ne peuvent être pressés que si swipe.complete est 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 les événements de la souris et du toucher. Par exemple, pour avoir 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 le id de l'étiquette. C'est important, car l'utilisation des propriétés attachées à un élément permet à cet élément d'accepter des événements. Supposons que nous ayons omis le 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 elle. 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 le SwipeDelegate lui-même, utilisez sa propriété pressed.

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

Voir aussi 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é jusqu'à la fermeture et que la transition est terminée.

Il est utile pour effectuer une action lors de l'annulation d'un glissement. Par exemple, il peut être utilisé pour annuler le retrait 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 aussi 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 balayage. Par exemple, il peut être utilisé pour supprimer 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 aussi swipe.

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

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

Il est utile pour effectuer une action à la fin d'un glissement. Par exemple, il peut être utilisé pour supprimer 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 aussi swipe et swipe.closed().

Documentation sur les signaux attachés

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

Ce signal peut être attaché à 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 est true.

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

Pour réagir aux clics sur le site 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 de la méthode

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

Cette méthode définit le position du swipe à 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 aussi swipe et swipe.open().

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

Cette méthode définit l'adresse position du swipe de sorte qu'il s'ouvre à partir de l'adresse side spécifiée.

Valeurs disponibles :

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.2 (Qt 5.9).

Voir aussi swipe et swipe.close().