QML:带可移动单元的GridView(拖放)

Question

我遵循http://qt-project.org/wiki/Drag_and_Drop_within_a_GridView上给出的方法.

我有提出的计划.拖放工作正常,但在删除后,我的网格中出现空白空间.我怎样才能改善这个？

此外,我还注意到第46行中的函数indexAt()在拖动操作期间无法正常工作.因此我不得不添加gridArea.index的显式计算.

(编辑)在我看来,空的空间出现是因为在丢弃元素之后它返回到它的原始位置(它在可见元素下面).GridView未更新并以不规则状态完成.

import QtQuick 1.1

GridView {
    id: mainGrid
    cellWidth: 165; cellHeight: 95
    width: 5*cellWidth; height: 4*cellHeight
    model: myModel
    delegate: myButton

    ListModel {
        id: myModel
        function createModel() {
            for (var i=1; i<=20; i++) {
                myModel.append({"display": i, "uid": i})
            }
        }
        Component.onCompleted: {createModel()}
    }

    Component {
        id: myButton
        Rectangle {
            id: item
            width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
            border.width: 1
            property int uid: (index >= 0) ? myModel.get(index).uid : -1
            Text {
                anchors.centerIn: parent
                text: display
                font.pixelSize: 48
            }
            states: [
                State {
                    name: "active"; when: gridArea.activeId == item.uid
                    PropertyChanges {target: item; x: gridArea.mouseX-80; y: gridArea.mouseY-45; z: 10; smooth: false}
                }
            ]
        }
    }

    MouseArea {
        id: gridArea
        anchors.fill: parent
        hoverEnabled: true
        preventStealing : true
        //property int index: mainGrid.indexAt(mouseX, mouseY) //WHY IS THIS NOT WORKING RELIABLE?
        property int mX: (mouseX < 0) ? 0 : ((mouseX < mainGrid.width - mainGrid.cellWidth) ? mouseX : mainGrid.width - mainGrid.cellWidth)
        property int mY: (mouseY < 0) ? 0 : ((mouseY < mainGrid.height - mainGrid.cellHeight) ? mouseY : mainGrid.height - mainGrid.cellHeight)
        property int index: parseInt(mX/mainGrid.cellWidth) + 5*parseInt(mY/mainGrid.cellHeight)  //item underneath cursor
        property int activeId: -1 //uid of active item
        property int activeIndex //current position of active item
        onPressAndHold: {
            activeId = mainGrid.model.get(activeIndex=index).uid
        }
        onReleased: {
            activeId = -1
        }
        onPositionChanged: {
            if (activeId != -1 && index != -1 && index != activeIndex) {
                mainGrid.model.move(activeIndex, activeIndex = index, 1)
            }
        }
    }
}

Answer 1

在这里，我给出工作代码。我添加了额外的层次结构并将矩形放入项目中。此外，我必须重新调整矩形的父级。有许多类似的解决方案可用，例如此处。

在给定的解决方案中，函数indexAt()没有问题，因此不再需要gridArea.index的显式计算。

我将不胜感激对此解决方案的任何评论以及为什么这些更改如此重要。我仍然认为原来的解决方案很直观，我不明白为什么它不起作用。

import QtQuick 1.1

GridView {
    id: mainGrid
    cellWidth: 165; cellHeight: 95
    width: 5*cellWidth; height: 4*cellHeight
    model: myModel
    delegate: myButton

    ListModel {
        id: myModel
        function createModel() {
            for (var i=1; i<=20; i++) {
                myModel.append({"display": i, "uid": i})
            }
        }
        Component.onCompleted: {createModel()}
    }

    Component {
        id: myButton
        Item {
            id: item
            width: mainGrid.cellWidth-5; height: mainGrid.cellHeight-5;
            Rectangle {
                id: box
                parent: mainGrid
                x: item.x; y: item.y;
                width: item.width; height: item.height;
                border.width: 1
                property int uid: (index >= 0) ? myModel.get(index).uid : -1
                Text {
                    anchors.centerIn: parent
                    text: display
                    font.pixelSize: 48
                }
                states: [
                    State {
                        name: "active"; when: gridArea.activeId == box.uid
                        PropertyChanges {target: box; x: gridArea.mouseX-80; y: gridArea.mouseY-45; z: 10}
                    }
                ]
            }
        }
    }

    MouseArea {
        id: gridArea
        anchors.fill: parent
        hoverEnabled: true
        preventStealing : true
        property int index: mainGrid.indexAt(mouseX, mouseY) //item underneath cursor
        property int activeId: -1 //uid of active item
        property int activeIndex //current position of active item

        onPressAndHold: {
            activeId = mainGrid.model.get(activeIndex=index).uid
        }
        onReleased: {
            activeId = -1
        }
        onPositionChanged: {
            if (activeId != -1 && index != -1 && index != activeIndex) {
                mainGrid.model.move(activeIndex, activeIndex = index, 1)
            }
        }
    }
}