Swipe to delete in QML

Question

Is it possible to delete items from a ListView in QML like on webOS, i.e. after swiping the entry there's "cancel" and "delete".

I'd like to use Qt 4.7 (so QtQuick 1.1)

Answer 1

There is no default component in QtQuick that can handle gesture signals. There was a Qt labs project that introduced a GestureArea that may do what you want. It was not pacakged with QtQuick 1.1 and I am unsure as to its current status but feel free to give it a try. http://blog.qt.digia.com/blog/2010/10/05/getting-in-touch-with-qt-quick-gestures-and-qml/ Otherwise, there is no QML solution although Qt itself does have gesture programming support http://qt-project.org/doc/qt-4.7/gestures-overview.html

Answer 2

There is a delete method in the help, see this example

  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: model.sender + " - " + model.title
        width: parent.width



        ListView.onRemove: SequentialAnimation {
            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
            }
        }

        onClicked: {
            swipe.complete=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"
            }
        }
    }
}