Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Dynamic View Ordering of SwipeViews



  • Hi,

    I have a list of Swipeviews that I am trying to rearrange when you hold one down. My current problem is that when the SwipeView is held down it is not able to move. But when you hold down the rectangle it is in, you can rearrange it. Which won't work for me as the SwipeView needs to take up the entire space of the rectangle.

    I used the Dynamic View Ordering tutorial as the base for the code:
    https://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview3-example.html

    main.qml

    ApplicationWindow {
        id: root
        visible: true
    
        Rectangle {
            anchors.fill: parent
            id: rect
            Component {
                id: dragDelegate
    
                MouseArea {
                    id: dragArea
    
                    property bool held: false
    
                    anchors { left: parent.left; right: parent.right }
                    height: content.height
    
                    drag.target: held ? content : undefined
                    drag.axis: Drag.YAxis
                    propagateComposedEvents: true
                    onPressAndHold: held = true
                    onReleased: held = false
    
                    Rectangle {
                        id: content
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            verticalCenter: parent.verticalCenter
                        }
                        width: dragArea.width; height: rect.height/3
    
    
    
                        border.width: 5
                        border.color: "lightsteelblue"
    
                        color: dragArea.held ? "lightsteelblue" : "red"
                        Behavior on color { ColorAnimation { duration: 100 } }
    
                        radius: 2
                        Drag.active: dragArea.held
                        Drag.source: dragArea
                        Drag.hotSpot.x: width / 2
                        Drag.hotSpot.y: height / 2
                        states: State {
                            when: dragArea.held
    
                            ParentChange { target: content; parent: rect }
                            AnchorChanges {
                                target: content
                                anchors { horizontalCenter: undefined; verticalCenter: undefined }
                            }
                        }
    
                        Loader{
                            id: tileLoader
                            anchors.centerIn: parent
                            width: parent.width/2
                            height: parent.height/2
                            source: page
                        }
                    }
                    DropArea {
                        anchors { fill: parent; margins: 10 }
    
                        onEntered: {
                            visualModel.items.move(
                                        drag.source.DelegateModel.itemsIndex,
                                        dragArea.DelegateModel.itemsIndex)
                        }
                    }
                }
            }
            DelegateModel {
                id: visualModel
    
                model: PageModel {}
                delegate: dragDelegate
            }
    
            ListView {
                id: view
    
                anchors { fill: parent; margins: 2 }
    
                model: visualModel
    
                spacing: 4
                cacheBuffer: 50
            }
        }
    }
    

    PageModel.qml

    import QtQuick 2.0
    
    ListModel {
        ListElement {
            page: "testPage1.qml"
        }
        ListElement {
            page: "testPage1.qml"
        }
        ListElement {
            page: "testPage1.qml"
        }
        ListElement {
            page: "testPage1.qml"
        }
    }
    

    testPage1.qml

    import QtQuick 2.0
    import QtQuick.Controls 2.3
    import QtQml 2.2
    import QtCharts 2.0
    
    SwipeView {
        spacing: 5
    
        Rectangle{
            MouseArea {
                    anchors.fill: parent
                    propagateComposedEvents: true
    
                    onClicked: mouse.accepted = false;
                    onPressed:{
                         console.log("MousePressed but passed on")
                         mouse.accepted = false;
                    }
                    onReleased: mouse.accepted = false;
                    onDoubleClicked: mouse.accepted = false;
                    onPositionChanged: mouse.accepted = false;
                    onPressAndHold: mouse.accepted = false;
            }
            color: "green"
            Text{
                id: textbox1
                text: qsTr("this is textSwip1")
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    
        Rectangle{
            color: "green"
            Text{
                id: textbox2
                text: qsTr("this is textSwip2")
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    
        Rectangle{
            color: "green"
            Text{
                id: textbox3
                text: qsTr("this is textSwip3")
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
    

    Any and all help is much appreciated.
    Thank you


Log in to reply