QML：两个GridView之间的共享列表模型

Question

我需要在两个gridview之间共享项目的模型列表，因为我需要使用拖放在两个控件之间移动项目。显而易见的解决方案是使用Package，但在我的情况下，我有一个问题，即GridView显示一个空白区域，如果将该项目放置在另一个视图上，则该项目也应位于该空白区域。屏幕截图将阐明问题。如您所见，我通过将偶数和奇数置于两个视图中来添加块，但这创建了您可以看到的列。有人知道如何使该块以“正常”顺序显示在视图中而没有空格？

遵循示例代码：

GridView {
    id: grid1
    cellWidth: 80
    cellHeight: 80
    model: visualDelegateModel.parts.grid1
}

GridView {
    id: grid2
    cellWidth: 80
    cellHeight: 80
    model: visualDelegateModel.parts.grid2
}

ListModel {
    id: blocksListModel
    ListElement { color: "blue" }
    ListElement { color: "green" }
    ListElement { color: "red" }
    ListElement { color: "yellow" }
    ListElement { color: "orange" }
    ListElement { color: "purple" }
    ListElement { color: "cyan" }
    ListElement { color: "magenta" }
    ListElement { color: "chartreuse" }
    ListElement { color: "aquamarine" }
    ListElement { color: "indigo" }
    ListElement { color: "black" }
    ListElement { color: "lightsteelblue" }
    ListElement { color: "violet" }
    ListElement { color: "grey" }
    ListElement { color: "springgreen" }
    ListElement { color: "salmon" }
    ListElement { color: "blanchedalmond" }
    ListElement { color: "forestgreen" }
    ListElement { color: "pink" }
    ListElement { color: "navy" }
    ListElement { color: "goldenrod" }
    ListElement { color: "crimson" }
    ListElement { color: "teal" }
}

DelegateModel {
    id: visualDelegateModel
    delegate: Block {}
    model: blocksListModel
}

这是Block委托：

Package {
    id: packageRoot

    Item { id: grid1Delegate; Package.name: "grid1"}
    Item { id: grid2Delegate; Package.name: "grid2" }

    Rectangle {
        id: block
        width: 72; height: 72
        anchors {
            horizontalCenter: parent.horizontalCenter;
            verticalCenter: parent.verticalCenter
        }
        color: model.color
        radius: 3

        state: (index % 2) ? "grid1" : "grid2"

        states: [
            State {
                name: "grid1"
                ParentChange { target: block; parent: grid1Delegate }
            },
            State {
                name: "grid2"
                ParentChange { target: block; parent: grid2Delegate }
            }
        ]
    }
}