如何交换 qml 网格中的元素？

Question

我尝试过：

var child = grid.children[slot1];
grid.children[slot1] = grid.children[slot2];
grid.children[slot2] = child;

但没有成功。

当将元素重新设置为网格的父级（element.parent = grid）时，它会被有效地添加，但无法对它们进行排序。

我应该使用自己的 QML 小部件吗？

Answer 1

ListModel 提供移动元素功能，您可以将其与 GridView（不仅仅是网格）结合使用。

GridView {
    id: grid
    anchors.fill: parent
    cellWidth: 32
    cellHeight: 32
    property bool loaded: false;

    model : ModelInheritingListModel {
    }

    delegate: MyDelegate {

    }

    onSwap: {
        var min = Math.min(slot1, slot2);
        var max = Math.max(slot1, slot2);
        grid.model.move(min, max, 1);
        grid.model.move(max-1, min, 1);
    }
}

如果您想在委托中添加动画，则在交换时：

Item {
    id: main
    width: grid.cellWidth
    height: grid.cellHeight

    Image {
        id: img
        x: main.x
        y: main.y

        /* In order to use animations, we can't use the main level component as
          it technically is the same item, so we need to animate the image.

          So we set the image's position relative to the parent instead, so
          we can animate its coordinates properly */
        parent: grid

        Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.InOutCubic}}
        Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.InOutCubic}}

        source: imagesource
        width: 32
        height: 32
    }
}

请注意您必须通过重新设置父级来使用的技巧...

该死的 QML！