Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › Drag and drop ListView + SwipeOptionsContainer + SimpleRow

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #18935


    I have prepared a simple example of a dynamic list view where items can be dynamically added, deleted by swiping to the left and moved by pressing and holding. For this last feature, I followed this example, http://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview3-example.html.

    It works as expected, but is there a better way to do it?. Since SimpleRow does not propagate events I had to include a new MouseArea (holdMouseArea), where I have to manage all the events of SimpleRow. I tried to set propagateComposedEvents to true, but it does not work unless I set mouse.accepted = true in onPressed signal. If I do that, then I cannot listen to the onPressAndHold signal needed for the drag and drop. So, I would like to know if there a way to propagate events to SimpleRow, another option would be that SimpleRow propagates events to its parent.

    This example works fine in the Felgo live client, but there an error in the Felgo web editor indicating that QtQml.Models is not installed.

    import Felgo 3.0
    import QtQuick 2.9
    import QtQml.Models 2.2
    App {
            id: root
            anchors.fill: parent
                anchors.fill: parent
                    id: header
                    width: parent.width
                    height: dp(40)
                    color: Theme.secondaryBackgroundColor
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: qsTr("List view")
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: dp(5)
                        icon: IconType.plus
                        onClicked: addItem()
                    id: listView
                    height: parent.height - header.height
                    model: visualModel
                    emptyText.text: qsTr("No items, add a new one")
            DelegateModel {
                id: visualModel
                model: listModel
                delegate: listDelegate
                id: listModel
                Component.onCompleted: {
                    for(var i=1;i<=10; i++)
            Component {
                id: listDelegate
                Item {
                    id: dragArea
                    property bool held: false
                    anchors { left: parent.left; right: parent.right }
                    height: container.height
                    DropArea {
                        anchors { fill: parent; margins: 10 }
                        onEntered: visualModel.items.move(drag.source.DelegateModel.itemsIndex,
                    SwipeOptionsContainer {
                        id: container
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        width: dragArea.width;
                        rightOption: SwipeButton {
                                 text: qsTr("Delete")
                                 icon: IconType.remove
                                 height: dragArea.height
                                 backgroundColor: "indianred"
                                 onClicked: listModel.remove(index,1)
                        SimpleRow {
                            id: row
                            property bool pressed
                            anchors.fill: parent
                            text: name
                            style.backgroundColor: dragArea.held ? Qt.lighter(Theme.tintColor) :
                                                   row.pressed ? Theme.listSection.selectedBackgroundColor : Theme.backgroundColor
                            //onSelected: console.log("Selected item: " + name)
                                id: holdMouseArea
                                anchors.fill: parent
                                pressAndHoldInterval: 500
                                //propagateComposedEvents: true
                                drag.target: held ? container : undefined
                                drag.axis: Drag.YAxis
                                onPressed:      row.pressed = true
                                onPressAndHold: dragArea.held = true
                                onReleased:     {
                                    row.pressed   = false
                                    dragArea.held = false
                                onCanceled: {
                                    row.pressed   = false
                                    dragArea.held = false
                                onClicked: console.log("Selected item: " + name)
                                //onClicked: mouse.accepted = false
                                //onPressed: mouse.accepted = false
                        Drag.active: dragArea.held
                        Drag.source: dragArea
                        Drag.hotSpot.x: width / 2
                        Drag.hotSpot.y: height / 2
                        states: State {
                            when: dragArea.held
                            ParentChange { target: container; parent: root }
                            AnchorChanges {
                                target: container
                                anchors { horizontalCenter: undefined; verticalCenter: undefined }
        function rowModel(i)
            return {name: qsTr("Item ") + i, value: i}
        function addItem()
            var max = 0
            for(var i=0; i<listModel.count;i++)
                if (listModel.get(i).value > max) max = listModel.get(i).value



    Felgo Team


    that’s a really nice example. I think the “cleaner” option would be to not use the SimpleRow at all, and go for a fully custom row item in this case. This would mean a bit more effort to get the styling right for all platforms, but you don’t have to care about juggling events between 2 MouseAreas, where one alone is sufficient. Anyway I think your solution is pretty solid if you want to keep the SimpleRow.


Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded