SwipeDelegate QML Type

Delegat für wischbare Elemente. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• 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

Zugehörige Eigenschaften

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

Signale

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

Angehängte Signale

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

Methoden

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

Ausführliche Beschreibung

SwipeDelegate stellt ein Ansichtsobjekt bereit, das durch Wischen nach links oder rechts weitere Optionen oder Informationen anzeigt. Es wird als Delegat in Ansichten wie „ ListView “ verwendet.

Im folgenden Beispiel wird SwipeDelegate in einer „ ListView “ verwendet, um das Entfernen von Elementen durch Wischen nach links zu ermöglichen:

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 erbt seine API von „ ItemDelegate “, das wiederum von „ AbstractButton “ abgeleitet ist. So können Sie beispielsweise „ text “ festlegen und mithilfe der „ AbstractButton “-API auf „ clicks “ reagieren.

Informationen zum Fortschritt eines Wischvorgangs sowie zu den Komponenten, die beim Wischen angezeigt werden sollen, sind beide über das gruppierte Eigenschaftsobjekt „ swipe “ verfügbar. Beispielsweise enthält „ swipe.position “ die Position des Wischvorgangs im Bereich von „ -1.0 “ bis „ 1.0 “. Die Eigenschaft „ swipe.left “ legt fest, welches Element angezeigt wird, wenn das Steuerelement nach rechts gewischt wird, und umgekehrt für „ swipe.right “. Die Positionierung dieser Komponenten bleibt den Anwendungen überlassen. Wenn beispielsweise keine Position für „ swipe.left “ oder „ swipe.right “ angegeben wird, geschieht Folgendes:

Wenn „ swipe.left “ und „ swipe.right “ links bzw. rechts am Element „ background “ verankert sind, verhalten sie sich wie folgt:

Bei Verwendung von „ swipe.left “ und „ swipe.right “ kann das Steuerelement nicht über den linken und rechten Rand hinausgewischt werden. Um dieses „Umbruch“-Verhalten zu erzielen, setzen Sie stattdessen „ swipe.behind “. Dadurch wird unabhängig von der Wischrichtung des Steuerelements immer dasselbe Element angezeigt. Im folgenden Bild haben wir beispielsweise „ swipe.behind “ gesetzt und das Steuerelement anschließend wiederholt in beide Richtungen gewischt:

Siehe auch „Anpassen von SwipeDelegate“, „Delegate-Steuerelemente“ und „Galerie-Beispiel“.

Dokumentation zu den Eigenschaften

swipe group

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

Siehe auch „ contentItem“ , „ background “, „ swipe.open()“ und „ swipe.close()“.

Dokumentation zu angehängten Eigenschaften

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

Diese Eigenschaft kann einem nicht-interaktiven Element zugewiesen werden, das unter swipe.left, swipe.right oder swipe.behind deklariert wurde, um zu erkennen, ob es gedrückt wird. Elemente können nur gedrückt werden, wenn swipe.complete auf true gesetzt ist.

Beispiel:

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 ist möglich, mehrere Elemente zu haben, die jeweils Maus- und Touch-Ereignisse empfangen. Um beispielsweise zwei Aktionen im Element „ swipe.right “ zu definieren, verwenden Sie den folgenden Code:

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

Beachten Sie, wie die Zuweisung „ color “ in jedem „ background “-Element die angehängte Eigenschaft mit dem „ id “ des Labels qualifiziert. Dies ist wichtig; die Verwendung der angehängten Eigenschaften bei einem Element bewirkt, dass dieses Element Ereignisse akzeptiert. Angenommen, wir hätten im vorherigen Beispiel den „ id “ weggelassen:

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

Das Hintergrundelement „ Rectangle “ ist ein untergeordnetes Element des Labels und empfängt daher natürlich Ereignisse vor diesem. In der Praxis bedeutet dies, dass sich die Hintergrundfarbe ändert, der „ onClicked “-Handler im Label jedoch niemals aufgerufen wird.

Verwenden Sie für interaktive Steuerelemente (wie z. B. „ Button “), die in diesen Elementen deklariert sind, stattdessen deren jeweilige „ pressed “-Eigenschaft.

Für Drücke auf das „ SwipeDelegate “ selbst verwenden Sie dessen „ pressed “-Eigenschaft.

Diese Eigenschaft wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch „ clicked()“.

Signal-Dokumentation

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

Dieses Signal wird ausgelöst, wenn der Delegat durch Wischen geschlossen wurde und der Übergang abgeschlossen ist.

Es ist nützlich, um bei Abbruch eines Wischvorgangs eine bestimmte Aktion auszuführen. So kann es beispielsweise verwendet werden, um das Entfernen des Delegaten aus der Liste, in der er sich befindet, rückgängig zu machen.

Dieses Signal wurde in QtQuick.Controls 2.2 (Qt 5.9) eingeführt.

Siehe auch „ swipe “ und „ swipe.opened()“.

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

Dieses Signal wird ausgelöst, wenn „ swipe.complete “ den Wert „ true “ annimmt.

Es ist nützlich, um nach Abschluss eines Wischvorgangs eine bestimmte Aktion auszuführen. Es kann beispielsweise verwendet werden, um den Delegaten aus der Liste zu entfernen, in der er sich befindet.

Dieses Signal wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch „ swipe “.

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

Dieses Signal wird ausgelöst, wenn der Delegat durch Wischen geöffnet wurde und der Übergang abgeschlossen ist.

Es ist nützlich, um nach Abschluss eines Wischvorgangs eine Aktion auszuführen. Es kann beispielsweise dazu verwendet werden, den Delegaten aus der Liste zu entfernen, in der er sich befindet.

Dieses Signal wurde in QtQuick.Controls 2.2 (Qt 5.9) eingeführt.

Siehe auch „ swipe “ und „ swipe.closed()“.

Dokumentation zum angehängten Signal

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

Dieses Signal kann einem nicht-interaktiven Element zugewiesen werden, das unter swipe.left, swipe.right oder swipe.behind deklariert wurde, um auf Klicks zu reagieren. Elemente können nur angeklickt werden, wenn swipe.complete auf true gesetzt ist.

Verwenden Sie für interaktive Steuerelemente (wie z. B. „ Button “), die in diesen Elementen deklariert sind, stattdessen deren jeweiliges „ clicked() “-Signal.

Um auf Klicks auf das SwipeDelegate selbst zu reagieren, verwenden Sie dessen Signal „ clicked()“.

Dieses Signal wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch pressed.

Methodendokumentation

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

Diese Methode setzt die „ position “ des Wischvorgangs auf „ 0 “. Alle Animationen, die für die „ x “-Position von „ contentItem “ und „ background “ definiert sind, werden ausgelöst.

Diese Methode wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.

Siehe auch „ swipe “ und „ swipe.open()“.

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

Diese Methode legt die „ position “ der Wischgeste so fest, dass sie von der angegebenen „ side “ aus geöffnet wird.

Mögliche Werte:

Alle für die Position „ x “ von „ contentItem “ und „ background “ definierten Animationen werden ausgelöst.

Diese Methode wurde in QtQuick.Controls 2.2 (Qt 5.9) eingeführt.

Siehe auch „ swipe “ und „ swipe.close()“.