qml - 如何交换 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);
    }
}

如果您想在委托(delegate)中添加动画，则在交换时:

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
    }
}

请注意您必须通过重新养育 child 来使用的技巧......

该死的QML!