如何通过DelegateModel实现GridView拖拽元素的顺序读写（不修改C++模型）

核心需求 #

在Qt 5 QML的3×3按钮网格中实现拖拽排序，不直接修改底层C++模型，而是通过独立索引列表管理显示顺序，同时支持撤销（Cancel按钮恢复初始状态）。当前存在的问题：

• 无法从Delegate外部读取/写入visualIndex
• writeOrder函数中获取元素时返回undefined或报错
• 未实现撤销功能

代码修复与功能实现 #

1. 修正后的完整代码 #

Item {
    id: root
    anchors.fill: parent

    // 存储初始顺序和当前顺序的索引列表
    property var initialOrder: []
    property var currentOrder: []

    onVisibleChanged: {
        if (visible) { 
            readOrder() 
            // 保存初始顺序用于撤销
            initialOrder = currentOrder.slice()
        } else { 
            writeOrder() 
        }
    }

    // 从外部传入的readList设置显示顺序
    function readList(newList) {
        currentOrder = newList.slice()
        // 重置DelegateModel的items顺序
        id_delegateModel.items.clear()
        currentOrder.forEach(idx => {
            id_delegateModel.items.append(id_delegateModel.model.get(idx))
        })
    }

    // 读取当前显示顺序生成writeList
    function writeOrder() {
        currentOrder = []
        // 直接通过DelegateModel的items获取当前顺序对应的原始模型索引
        for(let i = 0; i < id_delegateModel.items.count; ++i) {
            currentOrder.push(id_delegateModel.items.get(i).modelIndex)
        }
        // 此处可将currentOrder传递给外部或C++层
        console.log("当前顺序索引列表:", currentOrder)
    }

    // 撤销操作：恢复初始顺序
    function restoreInitialOrder() {
        readList(initialOrder)
    }

    Flickable {
        id: id_flickable
        anchors.fill: parent

        GridView {
            id: id_gridView
            anchors.fill: parent
            clip: true
            cellWidth: width / 3
            cellHeight: height / 3

            model: DelegateModel {
                id: id_delegateModel

                // 实际为C++模型，此处用示例数据
                model: ListModel {
                    ListElement { buttonName: "A"; modelIndex: 0 }
                    ListElement { buttonName: "B"; modelIndex: 1 }
                    ListElement { buttonName: "C"; modelIndex: 2 }
                    ListElement { buttonName: "D"; modelIndex: 3 }
                    ListElement { buttonName: "E"; modelIndex: 4 }
                    ListElement { buttonName: "F"; modelIndex: 5 }
                    ListElement { buttonName: "G"; modelIndex: 6 }
                    ListElement { buttonName: "H"; modelIndex: 7 }
                    ListElement { buttonName: "I"; modelIndex: 8 }
                }

                delegate: RowLayout {
                    id: id_delegate 
                    required property int index
                    required property string buttonName
                    required property int modelIndex // 绑定原始模型索引，不随拖拽改变

                    Label {
                        id: id_numeration
                        text: String(index + 1) // 显示当前视觉位置
                    }

                    DropArea {
                        id: id_dropArea
                        anchors.fill: parent
                        property int visualIndex: id_delegate.index

                        onEntered: function (drag) {
                            let dragSource = drag.source
                            if (dragSource.visualIndex !== visualIndex) {
                                // 移动DelegateModel的items更新视觉顺序
                                id_delegateModel.items.move(dragSource.visualIndex, visualIndex)
                            }
                        }

                        DragArea {
                            id: id_dragArea
                            anchors.fill: parent
                            visualIndex: id_dropArea.visualIndex

                            // 拖拽时同步更新visualIndex
                            onVisualIndexChanged: {
                                id_dropArea.visualIndex = visualIndex
                            }

                            Button {
                                id: id_gridTextBtn
                                anchors.fill: parent
                                text: buttonName
                            }
                        }
                    }
                }
            }
        }
    }

    // 示例Cancel按钮，点击恢复初始顺序
    Button {
        id: cancelBtn
        text: "Cancel"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.margins: 10
        onClicked: root.restoreInitialOrder()
    }
}

2. 关键问题解决点 #

• 顺序读写逻辑：
  • 用currentOrder数组存储当前视觉顺序对应的原始模型索引，readList通过重置DelegateModel.items设置显示顺序；writeOrder遍历DelegateModel.items提取modelIndex生成顺序列表，彻底解决外部无法读取Delegate属性的问题。
• 撤销功能实现：
  • 在visibleChanged时保存initialOrder（初始顺序的副本），点击Cancel按钮调用restoreInitialOrder，通过readList重置为初始状态。
• Delegate绑定修正：
  • 将原始模型索引绑定为modelIndex属性，确保拖拽时不丢失与原始模型的关联；修正buttonName的绑定方式，直接使用required property，避免间接访问模型导致的编译错误。
• 拖拽逻辑简化：
  • 在DropArea.onEntered中直接操作DelegateModel.items.move，实时更新视觉顺序，无需在onDropped中重复处理。

3. C++模型适配说明 #

如果底层是QAbstractListModel等C模型，只需将DelegateModel.model绑定到C模型实例，并确保C模型中包含modelIndex角色（或自定义角色存储原始索引），readList和writeOrder的逻辑保持不变，仅需将currentOrder传递给C层即可。

内容的提问来源于stack exchange，提问作者beuzel