Qt5 QML: swap two Items in ListView

Question

i'm using model view in qml.

    ListView{
        id: targetParameter
        width: parent.width
        height: parent.height
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: 20
        spacing: 10
        orientation: ListView.Horizontal
        interactive: false
        model: proxyModelCharacterization
        delegate: ParameterChangeTarget {
            paramWidht: {
                if(name === "NAME"){
                    targetParameter.width * 0.11
                }else{
                    targetParameter.width * 0.42
                }
            }
            paramHeight: targetParameter.height * 0.95
        }
    }

with this list view, I have three elements (for example Rectangle). rect1, rect2, rect3. i want to swap rect2 and rect3, but i can't change the order in which they are instantiated on my controller.

how can i swap two element on list view? every kind of help or suggestion are greatly appreciated.

Answer 1

You can use the .move() method to move an element in a ListModel.

In the following example, the elements are added in the ListModel once, in the Component.onCompleted signal. You can then move them up or down (in the model and hence, the view) by clicking on the corresponding buttons. The buttons use the move() method of ListModel.

Example:

ListModel {
    id: listModel
}

ListView {
    id: listView

    anchors.fill: parent

    spacing: 10
    model: listModel
    delegate: Rectangle {
        height: btnMoveUp.height
        width: listView.width
        color: "red"

        Button {
            id: btnMoveUp

            anchors.left: parent.left
            text: "Move Up"
            enabled: index !== 0

            onClicked: listModel.move(index, index-1,1)
        }

        Button {
            id: btnMoveDown

            anchors.left: btnMoveUp.right
            text: "Move Down"
            enabled: index !== listModel.count - 1

            onClicked: listModel.move(index, index+1,1)
        }

        Text {
            anchors {
                left: btnMoveDown.right
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: model.name
        }
    }
}

Component.onCompleted: {
    listModel.append({name: "Item 1"});
    listModel.append({name: "Item 2"});
    listModel.append({name: "Item 3"});
    listModel.append({name: "Item 4"});
    listModel.append({name: "Item 5"});
}