Qt5 QML：交换 ListView 中的两个项目答案

【问题标题】：Qt5 QML: swap two Items in ListViewQt5 QML：交换 ListView 中的两个项目
【发布时间】：2022-06-17 22:41:22
【问题描述】：

我在 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
        }
    }

在这个列表视图中，我有三个元素（例如矩形）。矩形1，矩形2，矩形3。我想交换 rect2 和 rect3，但我无法更改它们在我的控制器上实例化的顺序。

如何在列表视图中交换两个元素？非常感谢各种帮助或建议。

【问题讨论】：

QML动态视图排序教程3 - 移动拖拽物品：doc.qt.io/qt-6/…

标签： qt qml model-view

【解决方案1】：

您可以使用：https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html#move-method 移动 ListModel 中的元素。

在以下示例中，元素在 Component.onCompleted 信号中一次添加到 ListModel 中。然后，您可以通过单击相应的按钮向上或向下移动它们（在模型中，因此在视图中）。按钮使用 ListModel 的 move() 方法。

例子：

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"});
}

【讨论】：