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

How to change position in a ColumnLayout



  • I am a newbie in QML and I made a "accordion" item. I modified a not complete QML project for that.
    For that, I use PanelItems :

        Item {
            default property var contentItem: null
            property string title: "panel"
            id: root
            Layout.fillWidth: true
            height: 30
            Layout.fillHeight: current
            property bool current: false
    
            ColumnLayout {
        
                anchors.fill: parent
                spacing: 0
                Rectangle {
                    Drag.active: dragArea.drag.active
                    id: bar
                    Layout.fillWidth: true
                    height: 30
                    color:  root.current ? "#81BEF7" : "#CEECF5"
                    Text {
                        anchors.fill: parent
                        anchors.margins: 10
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        text: root.title
                    }
                    Text {
                        anchors{
                            right: parent.right
                            top: parent.top
                            bottom: parent.bottom
                            margins: 10
                        }
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                        text: "^"
                        rotation: root.current ? "180" : 0
                    }
                    MouseArea {
                        id: dragArea
                        anchors.fill: parent
                        cursorShape: Qt.PointingHandCursor
                        drag.axis: Drag.YAxis
        
                        drag.target: root
        
                        onReleased: {
                            console.log("release !")
                            root.Drag.drop()
                        }
                        onClicked: {
                            if (root.parent.current !== root) {
                                console.log('test');
                               // if( (root.parent.currentItem !== null) )
                                 // root.parent.currentItem.current = false;
                                root.current = !root.current;
        
                                root.parent.currentItem = root;
                            }  
                        }
                    }
                }
    
                Rectangle {
                    id: container
                    Layout.fillWidth: true
                    anchors.top: bar.bottom
                    implicitHeight: root.height - bar.height
                    clip: true
                    Behavior on implicitHeight {
                        PropertyAnimation { duration: 100 }
                    }
                }
                Component.onCompleted: {
                    if(root.contentItem !== null)
                       root.contentItem.parent = container;
                }
            }
        }
    

    PanelItem.qml

    Now that I succeeded, I wanted to make it possible to swap position between two different PanelItems in the ColumnLayout while using "drag and drop" functionnalities.

    At this time, I can drag and drop my items but I don't know how to swap positions between my items.

    Here is my main :

    
        ApplicationWindow {
            visible: true
            width: 400
            height: 400
    
            ColumnLayout {
                anchors.fill: parent
                spacing: 1
                id: test
                property var currentItem: null
                PanelItem {
                    title: "Panel 1"
                    Rectangle {
                        color: "orange"
                        anchors.fill: parent
                    }
                }
                PanelItem {
                    title: "Panel 2"
                    Rectangle {
                        color: "lightgreen"
                        anchors.fill: parent
                    }
                }
                PanelItem {
                    title: "Panel 3"
                    Rectangle {
                        color: "lightblue"
                        anchors.fill: parent
                    }
                }
                PanelItem {
                    title: "Panel 4"
                    Rectangle {
                        color: "yellow"
                        anchors.fill: parent
                    }
                }
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }
    

    main.qml

    I read that I should maybe try to do it with a ListView but I can't make it works with my PanelItems.

    Do you have any suggestion ? I am a bit lost with QML, Views etc.

    Thanks a lot !


Log in to reply