Forums

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

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

    Javier

    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 {
        Item{
            id: root
            anchors.fill: parent
    
            Column{
                anchors.fill: parent
    
                Rectangle{
                    id: header
                    width: parent.width
                    height: dp(40)
                    color: Theme.secondaryBackgroundColor
                    AppText{
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: qsTr("List view")
                    }
                    IconButton{
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: dp(5)
                        icon: IconType.plus
                        onClicked: addItem()
                    }
                }
    
                AppListView{
                    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
            }
    
            ListModel{
                id: listModel
    
                Component.onCompleted: {
                    for(var i=1;i<=10; i++)
                        listModel.append(rowModel(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,
                                                          dragArea.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)
    
                            MouseArea{
                                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
            listModel.append(rowModel(max+1))
        }
    }

     

    #18967

    Alex
    Felgo Team

    Hi,

    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.

    Cheers,
    Alex

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support