我遵循http://qt-project.org/wiki/Drag_and_Drop_within_a_GridView上给出的方法。QML:带可移动单元格的GridView(拖放)
我有介绍的程序。拖放正在工作,但在放下后,我的网格中会有空的空间 。我该如何改进?
此外,我还注意到,拖动操作过程中,第46行中的函数indexAt()无法正常工作。因此我不得不添加gridArea.index的明确计算。
(EDITED)在我看来,空的空间出现的原因是,在放下元素后,它返回到原来的位置(它在可见元素下面)。 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)
}
}
}
}